css 实现动画滚动

HTML部分

 <div class="box">
        <ul class="ul">
            <li>
                <span class="ff">水果：</span>
                <span>苹果、香蕉、橘子</span>
            </li>
            <li>
                <span class="ff">茶：</span>
                <span>龙井、茉莉花茶、红茶</span>
            </li>
            <li>
                <span class="ff">文具：</span>
                <span>中性笔、笔记本、尺子</span>
            </li>
            <li>
                <span class="ff">颜色：</span>
                <span>红色、绿色、蓝色</span>
            </li>
            <li>
                <span class="ff">衣服：</span>
                <span>外套、裤子、长袖</span>
            </li>
        </ul>
    </div>

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;
        }

    </style>

实现效果