无限移动的风景 css3 动画

本文介绍: 无限移动的风景 css3 动画。

&lt;style&gt;
    *{
        margin:0;
        padding:0;
        /* box-sizing: border-box; */
    }
    ul{
        list-style: none;
    }
    #nav{
        width:900px;
        height:100px;
        border:2px solid rgb(70, 69, 69);
        margin:100px auto;   
        overflow: hidden;
    }
    #nav ul{
        animation:moving 5s linear infinite;
        width:200%; /*怎么模拟动画无线滚动，关键点在这，因为当动画滚动完之后，ul会回到起始位置，如果设置宽度为大盒子的2倍则在视觉上不会出现回到初始位置重新滚动的问题*/
    }
    #nav ul li{
        float:left; 
    }
    #nav ul li img{ 
        width:100px;
        height: 100px;
    }
    /* 自定义动画 */
        @keyframes moving{
        from{
            transform:translateX(0)
        }
        to{
            transform: translateX(-900px);
        }

        }
        #nav:hover ul{ /*鼠标移入正在运行的动画停止*/
        animation-play-state:paused ;
        }
&lt;/style&gt;

&lt;div id="nav"&gt;
        <ul>
            <!-- 将图片复制两份，保证每份图片的宽跟 nav盒子的宽度相同 -->
            <!-- 第一份 -->
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=889&amp;h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=889&amp;h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&amp;fm=253&amp;fmt=auto&amp;app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <!-- 第二份 -->
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
            <li><img src="https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></li>
        </ul>
    </div>