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

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

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

我们打开我们的编译器后

首先先进行布局

布局之后，

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

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

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

再结合我们的伪类：

nth-child（）选择器，

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

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

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

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

END

扫码关注我们