Html
    Css
    Js

    
                        
* {
            padding: 0;
            margin: 0;
        }

        div {
            width: 882px;
            height: 76px;
            margin: 100px auto;
            background-color: #ddd;
            overflow: hidden;
        }

        div>ul {
            width: 200%;
            list-style: none;
            /*1.设置的名称*/
            animation-name: move;
            /*2.设置动画的耗时*/
            animation-duration: 7s;
            /*3.市场无限循环*/
            animation-iteration-: infinite;
            /*4.设置时间函数*/
            animation-timing-function: linear;
        }

        div>ul>li {
            width: 126px;
            float: left;
        }

        div>ul>li>img {
            width: 100%;
        }

        /*鼠标上移,停止动画*/

        div:hover>ul {
            cursor: pointer;
            animation-play-state: paused;
        }

        /*创建动画*/

        @keyframes move {
            from {
                transform: translatex(0);
            }
            to {
                transform: translatex(-882px);
            }
        }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css无缝滚动

0