css自动轮播原理(小白篇)

这里是一个小白基地,一切都是从不会到会,虽然学习是一个苦逼的不得了的过程,但是只要你在路上,它喵喵的就不要怕(我都不怕,你怕个毛啊~)!!! 

今天分享一个css自动轮播怎么写 

下面上一下我们的布局: 

布局代码

 css里面样式说一下思路:

div.wrap这个标签就是一个电视机,放映着每一张图片,ul这个标签就是几张图片的一个大容器,那么里面的li存放了每一张图片. 把ul定位一下,通过关键动画帧@keyframes去改变ul相对于wrap的位置不就ok啦嘛 ~ 

这个是开启关键动画帧

这里要注意了,我们写了四个li是为什么呢, 不是只有三张图片在滚动嘛,其原因是,第四个li要跟第一个li用同一张图片  为什么呢 ? 看下图的解析 ! 

动画原理解析

通过上图可以看出来,动画运动到最末尾的时候,也就是显示第四张图片了,然而我们的第四张图片跟第一张图片是一样的鸭,所以当动画回到最开始要重复播放的时候 !!!!奇迹发生啦 !!! 眼睛会产生错觉,两张第一张的图片重叠了,所以产生自动轮播的效果,此处应有掌声 ~