逆战小白提升日記——css做轮播图（超简单）

我们在设计网页时，常常会用到轮播图的设计，一般情况下会使用js，这样做出来的特效比较炫酷。但对于一些简单的网页，用css实现简单的轮播图效果，是十分方便的。
菜鸟请看，老鸟随意！！！！！！！！！
看下图↓↓↓

看上图，
黑色的是最外层容器，也就是我们能看到的区域（设置超出区域不可见overflow: hidden），
红色容器用来装我们需要轮播的图片，高度和父容器相同，按需要自行设置（加个弹性，让图片横向排列）
蓝色框表示我们加入的图片

<div id="box">
        <div class="box1">
            <img src="./img/heisha.jpg" alt="">
            <img src="./img/img3.jpg" alt="">
            <img src="./img/img4.webp.jpg" alt="">
            <img src="./img/mig2.webp.jpg" alt="">
            <img src="./img/img5.jpg" alt="">
        </div>
    </div>

接下来就是最关键的动画操作了，
设置子容器（装图片的）自动横向移动，就实现了轮播效果。
css动画是将运动过程分成100帧，那我们分出十几帧，让子容器原地移动，就实现了轮播图自动暂停的效果，看代码↓↓↓

#box{border: 10px black solid;width: 1200px;height: 600px;overflow: hidden;margin: 100px auto;}
#box .box1{width: 6000px;height: 600px;display: flex;animation: mov 28s infinite;}
#box .box1 img{width: 1200px;height: 600px;}
@keyframes mov{
        0%{transform: translate(-4800px,0);}
        11%{transform: translate(-4800px,0);}
        22%{transform: translate(-3600px,0);}
        33%{transform: translate(-3600px,0);}
        44%{transform: translate(-2400px,0);}
        55%{transform: translate(-2400px,0);}
        66%{transform: translate(-1200px,0);}
        77%{transform: translate(-1200px,0);}
        88%{transform: translate(0px,0);}
        100%{transform: translate(0px,0);}

效果视频（视频转换成GIF了，画质感人，见谅）↓↓↓

有几点我们是需要注意的：
1.设置的容器和图片大小要匹配，方便我们接下来的设置。
2.每次移动的距离一定是图片的宽度，这样视觉上每次只暂停显示一张图，符合设计需求。
3.暂停时间，和分配的帧数成正比，根据需要计算设置

好的今天的分享就这些，有疑问或者大佬指导的话请于下方评论吧！！！！！！