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

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

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

下面上一下我们的布局:?

布局代码

?css里面样式说一下思路:

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

这个是开启关键动画帧

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

动画原了解析

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