这里是一个小白基地, 一切都是从不会到会, 虽然学习是一个苦逼的不得了的过程, 但是只要你在路上, 它喵喵的就不要怕 (我都不怕, 你怕个毛啊~)!!!
今天分享一个 CSS 自动轮播怎么写
下面上一下我们的布局:
布局代码
CSS 里面样式说一下思路:
div.wrap 这个标签就是一个电视机, 放映着每一张图片, ul 这个标签就是几张图片的一个大容器, 那么里面的 li 存放了每一张图片. 把 ul 定位一下, 通过关键动画帧 @keyframes 去改变 ul 相对于 wrap 的位置不就 ok 啦嘛 ~
这个是开启关键动画帧
这里要注意了, 我们写了四个 li 是为什么呢, 不是只有三张图片在滚动嘛, 其原因是, 第四个 li 要跟第一个 li 用同一张图片 为什么呢 ? 看下图的解析 !
动画原理解析
通过上图可以看出来, 动画运动到最末尾的时候, 也就是显示第四张图片了, 然而我们的第四张图片跟第一张图片是一样的鸭, 所以当动画回到最开始要重复播放的时候 !!!! 奇迹发生啦 !!! 眼睛会产生错觉, 两张第一张的图片重叠了, 所以产生自动轮播的效果, 此处应有掌声 ~
来源: http://www.jianshu.com/p/adcaddd8ea29