css 实现动画滚动

HTML部分

 

        

            

                水果：
                苹果、香蕉、橘子
            
            

                茶：
                龙井、茉莉花茶、红茶
            
            

                文具：
                中性笔、笔记本、尺子
            
            

                颜色：
                红色、绿色、蓝色
            
            

                衣服：
                外套、裤子、长袖
            
        
    

css部分

.box {
            width: 1000px;
            height: 90px;
            background-color: aqua;
            border: 2px solid blue;
            overflow: hidden;
            margin: 40px auto;
            position: relative;
        }
        .ul {
            width: 205%;
            height: 50px;
            position: absolute;    
        /* animation*/
            animation: move  20s  infinite linear;

        }
      /*  设置动画效果  */
        @keyframes move {
            0% {
                left: 0px;
            }
            100% {
                left: -2000px;
            }
        }
        .ul li {
            float: left;
            width: 320px;
            height: 50px;
            background-color: aquamarine;
            border: 1px solid blanchedalmond;
            border-radius: 10px;
            margin: 20px 50px 20px 0;
            padding-left: 20px;
        }
        .ul li span {
            font-size: 20px;
            color: blueviolet;
            line-height: 50px;
        }
        .ul li .ff {
            font-size: 24px;
            color: blue;
            line-height: 50px;
        }
        .box:hover .ul {
            /* 实现鼠标指上去停止滚动播放 */
            animation-play-state: paused;
        }

    

实现效果