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{
     100%;
    overflow: hidden;
}
.authority ul{
     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{
     320px;
}

  

css动画:

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

  

原文地址:https://www.cnblogs.com/webSong/p/8391844.html