css实现简易轮播图

实现如下效果图:

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行

html部分

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#"><img src="./images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/4.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/5.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/6.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/7.jpg" alt=""></a>
            </li>
            <!-- 增加前三个图实现无缝链接 -->
            <li>
                <a href="#"><img src="./images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/3.jpg" alt=""></a>
            </li>
        </ul>
    </div>
</body>

css部分

 <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .box {
            /* 隐藏盒子外的部分 */
            overflow: hidden;
            position: absolute;
            height: 150px;
            width: 600px;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: 3px solid black;
        }
 
        .box:hover ul {
            /* 触摸暂停动画 ( 出现小姐姐要赶快暂停(●ˇ∀ˇ●) )*/
            animation-play-state: paused;
        }
 
        .box ul {
            list-style: none;
            width: 2000px;
            /* 动画匀速且无限循环 */
            animation: move 3s linear infinite;
        }
 
        .box ul li {
            float: left;
            width: 200px;
            height: 150px;
        }
 
        .box ul li img {
            width: 200px;
            height: 150px;
        }
 
        @keyframes move {
            100% {
                /* 移动7个图的距离 */
                transform: translate(-1400px);
            }
        }
    </style>

简单完成(当然用js最好(●ˇ∀ˇ●))

(Web APIs 01 - 掘金 (juejin.cn)) 第11栏