纯css实现超级简单的轮播图

绝地灬酷狼 2022-12-05 10:26 187阅读 0赞

随着现在信息的高速发展，互联网时代也来到了物联网时代，相信当今世上，没有人会没有使用过淘宝，京东，天猫等购物平台，那么你们一定会发现，不止是这些购物网站，还有很多的一些官网，网页等等，都会有着一个重要的特效——轮播图。

然后我们今天就来给大家分享一下，超级简单快速，并且不复杂的实现方式。

![94c93ad5778da3e8ebdbf7780369d551.gif][]

我们打开我们的编译器后

首先先进行布局

![f3c79637059225884b5c3c352fc04654.gif][]

![b9a0d2ceb4eb07ad20a750af80c7ed3f.png][]

![35c42f0c87d0a911fb1ff101f698fed2.gif][]

布局之后，

我们就要设置他们各自的样式了

![d7a57b803cd1ad5b2c8714f41d85fc83.gif][]

![9577913fd04ba4358722f398cdbcb03b.png][]

样式设置好了以后，我们思考一下， 要想实现轮播的效果，但是我们如果没有学过javascript，那么该怎么办呢，这个时候，我们就要想到一个小帮手：动画了

大家可以仔细思考一下，轮播图，在某种意义上，是不是也是一种动画啊，从某一处开始，到某一处结束，有个动画过程，所以我们需要给我们的box盒子设置一个动画@keyframes box\{\}，即：

![99b4e16677c8140c4c0793a1301b902e.png][]

![4c19cf5bd530975269eb182214f74db5.gif][]

再结合我们的伪类：

nth-child（）选择器，

就可以实现我们的轮播特效了

![c20e9d38b2b2487c8b412da4b0607364.png][]

![f982344e89a1f8735a1e51b985b13521.png][]

好了，这样就像我们文章开头的时候，那样的效果了，然后这里我们需要注意几个方面：

一个就是我们需要一个父盒子包裹你要轮播的卡片，同时父元素不能static定位，还得给它设置overflow属性，另外一个就是，我们轮播的这么几张卡片，需要相对于父元素进行绝对定位，同时需要偏移量为100%的倍数，最后就是利用动画进行x轴方向上的偏移了。

这种实现方式是很简单的，没有太多花里花哨的内容，充分运用简单明了的知识，来实现我们所需要的效果

![69219838426339549c115bae1813e6a2.gif][]

![彩色晃动小球分割线][813fd2b4e99afaa153abf4b2da7dca2a.gif]

END

![2f93fc81ae97a3ef681e1641837b8dc8.png][]

扫码关注我们

[94c93ad5778da3e8ebdbf7780369d551.gif]: /images/20221123/09cd2f8cc1364a6091948b17794d4c8f.png
[f3c79637059225884b5c3c352fc04654.gif]: /images/20221123/d7259d681b2e42a1a19411f1e0964993.png
[b9a0d2ceb4eb07ad20a750af80c7ed3f.png]: /images/20221123/3421ba63246a488db9053d84fdd5d6da.png
[35c42f0c87d0a911fb1ff101f698fed2.gif]: /images/20221123/d7086d6d844946129eeb4ac0c270c0d7.png
[d7a57b803cd1ad5b2c8714f41d85fc83.gif]: /images/20221123/fd00bb551b5046a5a1fa7e005db33dc5.png
[9577913fd04ba4358722f398cdbcb03b.png]: /images/20221123/7b7310f861f843f6bebb3a3a59911c71.png
[99b4e16677c8140c4c0793a1301b902e.png]: /images/20221123/2742364422124f85a9aa3c28a0814e63.png
[4c19cf5bd530975269eb182214f74db5.gif]: /images/20221123/aa2407b2e0c2417997bb4545aac700fa.png
[c20e9d38b2b2487c8b412da4b0607364.png]: /images/20221123/b498d5d8dae74ff39f6d41d13aaa652d.png
[f982344e89a1f8735a1e51b985b13521.png]: /images/20221123/89a610c3e9de4d63a8d17c86f64931b0.png
[69219838426339549c115bae1813e6a2.gif]: /images/20221123/2f3ab34f5b784ac4bf7baa627c9f1197.png
[813fd2b4e99afaa153abf4b2da7dca2a.gif]: /images/20221123/d6b96c2ba61246689b6695d6aacbb53c.png
[2f93fc81ae97a3ef681e1641837b8dc8.png]: /images/20221123/dbdd675efb3240cbb2881e3941aa364e.png