一、背景
最近和朋友在一起讨论的时候，我们提出了这样的一个提问，难道轮播图的效果只能通过js来实现吗？经过我们的一系列的争论，发现了这是可以通过纯css来实现这一效果的，CSS轮播图也是一种常见的网页展示方式，可以通过CSS样式来实现图片的切换效果。它不依赖于JavaScript，运行速度较快，并且具有较好的兼容性。那么今天一如既往的来一起来探讨一下如何去实现这一效果。
二、思路解析
这个效果并不是想想中的那么难，在这里我们需要使用到的有css中的属性也有css3中的属性，如果来阅读的小伙伴没有接触css3，也不用急，我会在接下来的一篇文章中详细介绍一下，这里使用到的css3的属性。
思路：
大家应该知道在很早之前的胶片电影的播放形式，我们这里的一个录播效果和胶片电影的思路是大同小异的，那么究竟是什么呢。
1、首先我们需要创建一个让用户观看轮播图的视口，也就是我们可以看到的部分；
2、既然有可以看到的部分，那就一定有不可以让用户看到的部分，所以超出的部分怎么办呢？这里我不做解释，留些思考的空间你们来想一下呢。
3、那么如何让这些图片动起来呢，这里就用到了css3中的属性，那就是动画属性，之后我会进行解释。
这就是基本的实现思路了。话不多说，直接进入代码实现阶段。
三、拆解分析阶段
注意：接下来的代码结构为了更好的让小伙伴们串联起来，所以采用了代码迭代的方式来讲解，在最后会添加代码的总体结构和css样式。
第一步我们就来创建我们的视口部分，在这里我们使用了div.wrap_out作为视口展示。
<div class="wrap_out"></div>.wrap_out {
width: 500px;
height: 300px;
margin: 300px auto;
border: 2px solid #f00;
}第二步我们需要来创建存放我们所有需要展示的内容的容器，这里我们使用ul来充当这一个容器，在这里我们展示5张图片，所以这里我们需要给ul这个容器设置宽为25oopx，高度和视口高度一致。
<div class="wrap_out">
<ul class="wrap"></ul>
</div> .wrap {
width: 2500px;
height: 300px;
}第三步，我们来创建存放每个内容的盒子，这里由于我们使用的是ul来融合这一部分，所以我们只要使用li来定义存放内容的盒子就可以。在这里我不使用图片讲解，我就直接使用不同的文字进行区分。
<div class="wrap_out">
<ul class="wrap">
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
<li>FOURTH</li>
<li>FIFTH</li>
</ul>
</div>.wrap > li {
width: 500px;
height: 300px;
background-color: #f90;
}
如果只这样写，那是肯定无法实现最终需要的效果的，所以现在我们需要让所有的盒子横向排列成一行，以方便之后的移动 。只需要在之前的ul中更新为以下代码
.wrap {
width: 2500px;
height: 300px;
display: flex;
}
增加完之后就会发现已经成为了我们初步想要实现的结果。
接下来就是把超出红色边框视口的部分隐藏。如下图：
.wrap_out {
width: 500px;
height: 300px;
margin: 300px auto;
border: 2px solid #f00;
overflow: hidden;
}现在我们视口中只能看到第一张图，其他的图片都在第一张的后边，那么接下来就不难想到了，只要让ul这个大盒子自己无限次的移动就可以了。
所以接下来我们需要来定制动画的规则，让他们动起来。
@keyframes wrap_animation {
0% {
transform: translate(0);
}
10% {
transform: translate(0);
}
25% {
transform: translate(-500px);
}
35% {
transform: translate(-500px);
}
50% {
transform: translate(-1000px);
}
60% {
transform: translate(-1000px);
}
75% {
transform: translate(-1500px);
}
85% {
transform: translate(-1500px);
}
90% {
transform: translate(-2000px);
}
100% {
transform: translate(-2000px);
}
}然后我们需要在需要设置动画的元素中引用我们已经定制好的规则。
.wrap {
width: 2500px;
height: 300px;
display: flex;
animation: wrap_animation 10s infinite linear;
}注意：这里需要注意不要将动画添加错元素
添加好之后就会发现静态的页面动起来了
但是会发现一个问题，就是在最后一张图之后会有一个白色的置空区域，那么如何解决呢，又是因为什么呢？
有空白的原因是应为我们的 transform: translate（）属性是以左边边框为基准点进行平移的，所以当我们移动到-2500px的时候就刚好会漏出那张白色的空白区域，所以我们只需要在最后添加一张和第一张图一样的区域，就可以实现轮播效果。
<ul class="wrap">
<li style="background-color: #f00">FIRST</li>
<li style="background-color: #0f0">SECOND</li>
<li style="background-color: #00f">THIRD</li>
<li style="background-color: pink">FOURTH</li>
<li style="background-color: purple">FIFTH</li>
<li style="background-color: #f00">FIRST</li>
</ul>这样我们的轮播图效果就完成了。
四、代码总览
1、html部分
<body>
<div class="box">
<div class="wrap_out">
<ul class="wrap">
<li style="background-color: #f00">FIRST</li>
<li style="background-color: #0f0">SECOND</li>
<li style="background-color: #00f">THIRD</li>
<li style="background-color: pink">FOURTH</li>
<li style="background-color: purple">FIFTH</li>
<li style="background-color: #f00">FIRST</li>
</ul>
</div>
</div>
</body>2、CSS部分
<style>
* {
margin: 0;
padding: 0;
}
html {
/* overflow-x: hidden; */
}
ul {
list-style: none;
}
.box {
width: 100vw;
height: 100vh;
display: flex;
}
.wrap_out {
width: 500px;
height: 300px;
margin: 300px auto;
border: 2px solid #f00;
overflow: hidden;
}
.wrap {
width: 3000px;
height: 300px;
display: flex;
animation: wrap_animation 10s infinite linear;
}
.wrap > li {
width: 500px;
height: 300px;
}
@keyframes wrap_animation {
0% {
transform: translate(0);
}
10% {
transform: translate(0);
}
25% {
transform: translate(-500px);
}
35% {
transform: translate(-500px);
}
50% {
transform: translate(-1000px);
}
60% {
transform: translate(-1000px);
}
75% {
transform: translate(-1500px);
}
85% {
transform: translate(-1500px);
}
90% {
transform: translate(-2000px);
}
100% {
transform: translate(-2000px);
}
}
</style>五、结语
感谢大家的耐心阅读，希望这篇文章能给您带来一些启发和帮助。如果您有任何疑问或建议，请随时在评论区留言，我会尽快回复。今天的分享就到这里了，如果您觉得这篇文章还不错，请点赞、分享给更多的朋友吧！同时，也欢迎关注我的博客，获取更多精彩内容。
