CSS3动画之无缝滚动

与js的无缝滚动类似，整个承载图片的盒子移动，克隆一组图片放置最后，当一组图片播放结束后将盒子定位在有一组图片宽度的左侧

HTML结构：

<div class="box">
    <ul class="left">
        <li><img src="../image/wufenggundong/1.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/2.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/3.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/4.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/5.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/6.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/7.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/8.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/1.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/2.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/3.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/4.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/5.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/6.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/7.jpg" alt=""/></li>
        <li><img src="../image/wufenggundong/8.jpg" alt=""/></li>
    </ul>
</div>

CSS：

      .box{
            position: relative;
            width: 1000px; /*一组图片的宽度*/
            height: 90px;
            padding: 5px 0;
            overflow: hidden;
            border:1px solid black;
        }
        .left{
            position: absolute;
            width: 10000px;/*拷贝一组图片，让父盒子足够宽*/
            top: 0px;
            left: 0px;
            -webkit-animation: anim 8s linear 0s infinite;
            -o-animation: anim 8s linear 0s infinite;
            animation: anim 8s linear 0s infinite;
        }
        .box li{
            float: left;
        }
        .left img{
            width: 125px;
            height: 90px;
        }
        @-webkit-keyframes anim {
            from{
                left:0;
            }
            to{
                left: -1000px;
            }
        }
        .box{
            position: relative;
            top: 0;
            left:0;
            width: 1000px;
            overflow: hidden;
        }
        .left{
            position: absolute;
            top:0;
            left:0;
            width: 10000px;
            -webkit-animation: anim 30s linear 0s infinite;
            -o-animation: anim 30s linear 0s infinite;
            animation: anim 30s linear 0s infinite;
        }
        .left li{
            float: left;
        }
        .left li img{
            width: 125px;
            height: 90px;
        }
        @-webkit-keyframes anim {
            from{
                left: 0px;
            }
            to{
                left: -1000px;
            }
        }

 

转载于:https://www.cnblogs.com/shisanjun/p/4827319.html