css3 无缝滚动

body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .view {
            width: 882px;
            height: 86px;
            margin: 200px auto;
            position: relative;
            overflow: hidden;
            border: 1px solid #CCC;
        }

        ul {
            width: 1764px;
            height: 86px;
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            left: 0;
            animation: move 8s linear infinite;
        }

        ul:hover {
            /*调整动画状态*/
            animation-play-state: paused;
        }

        li {
            float: left;
            font-size: 0;
        }

        /*动画序列*/
        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: -882px;
            }
        }

• 重点是重复一遍，计算拿到容器的宽度，无限滚动，若要后台请求数据，那就js 追加css，大家都懂的

<div class="view">
        <ul>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>
        </ul>   
    </div>