css写无缝滚动

html结构:

<div class="authority">
                    <ul>
                        <li>
                            <img src="./images/replace/zizhi01.jpg" alt="">
                        </li>
                        <li>
                            <img src="./images/replace/zizhi02.png" alt="">
                        </li>
                        <li>
                            <img src="./images/replace/zizhi03.jpg" alt="">
                        </li>
                        <li class="quanwei">
                            <div>
                                <img src="./images/replace/zizhi04.jpg" alt="">
                            </div>
                            <div>
                                <img src="./images/replace/zizhi04.jpg" alt="">
                            </div>
                        </li>
                        <li>
                            <img src="./images/replace/zizhi01.jpg" alt="">
                        </li>
                        <li>
                            <img src="./images/replace/zizhi02.png" alt="">
                        </li>
                        <li>
                            <img src="./images/replace/zizhi03.jpg" alt="">
                        </li>
                        <li class="quanwei">
                            <div>
                                <img src="./images/replace/zizhi04.jpg" alt="">
                            </div>
                            <div>
                                <img src="./images/replace/zizhi04.jpg" alt="">
                            </div>
                        </li>
                    </ul>
                </div>

  

 

 

  css

 .authority{
    width: 100%;
    overflow: hidden;
}
.authority ul{
    width: 2560px;
  animation: gun 10s linear infinite;
}
.authority ul:hover{
    animation-play-state: paused;
}
.authority ul>li{
    float: left;
    height: 448px;
    background-size: cover;
}
.authority ul>li img{
    width: 320px;
}

  

css动画:

@keyframes gun{
    from{
        transform: translateX(0px);
    }
    to{
        transform: translateX(-1280px );
    }
}

  

posted @ 2018-01-31 13:52  宋宇  阅读(191)  评论(0编辑  收藏  举报