CSS3 无限滚动

<div>
    <ul>
        //后面多加两个重复的是为了让循环一遍之后跳回原位置的时候不明显，一个假象的无限循环
        //加两个是因为ul宽度为600，li宽度为300
        <li><img src="images/banner1.png" alt=""></li>
        <li><img src="images/banner2.jpg" alt=""></li>
        <li><img src="images/banner3.jpg" alt=""></li>
        <li><img src="images/banner4.jpg" alt=""></li>
        <li><img src="images/banner1.png" alt=""></li>
        <li><img src="images/banner2.jpg" alt=""></li>
    </ul>
</div>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 600px;
            height: 188px;
            border: 1px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }

        ul{
            width: 2000px;
            height: 188px;
            background-color: black;//设置为黑色，是为了实现整个背景鼠标悬停的时候显示一个蒙版的效果
            animation: move 10s linear 0s infinite normal;//每一个li都需要向左滚动，干脆设置ul向左滚动
        }
        ul li{
            float: left;
            list-style: none;
            width: 300px;
            height: 188px;
            background-color: red;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        ul:hover{
            /*动画添加给谁, 就让谁停止*/
            animation-play-state: paused;
        }
        ul:hover li{
            opacity: 0.5;//蒙版的透明度
        }
        ul li:hover{
            opacity: 1;//比上一句的优先级高，所以如果鼠标悬停某个li，这个li就会原样显示，而其他的li的蒙版的透明度为0.5，添加一个蒙版的效果
        }
        @keyframes move {
            from{
                margin-left: 0;
            }
            to{
                margin-left: -1200px;
            }
        }
    </style>

效果