利用CSS3简单实现的大图滚动效果

利用CSS3简单实现的大图滚动效果

抛弃原生JavaScript实现大图滚动，抛弃JQ，抛弃插件，今天突然想使用Css3实现。

主要思路：参照JavaScript 实现思路：原生js实现的思路为：

                     1.父级设置宽高，超出隐藏

                      2.子级设置实际图片列表的总宽度

                      3.子级内的图片，设置浮动。

                       4.父级设置scrollLeft属性，用setInterval（）计时器重复调用（每17ms）达到滚动效果，注意临界值的判断。

纯css3实现思路：

                        1.父级设置position：relative； 

                         2.子级设置position：absolute；初始left： 0；

                         3.子级内的图片还是设置浮动。

                         4.通过animation动画，并设置关键帧，对子级left设置值，达到效果。

---

具体代码：

html代码

父级样式

子级样式

子级内img样式

关键帧

以上，网上还有很多相似案例，也可以对图片设置路径切换，达到切换图片的效果。

Ps. 之前学了less预编译语言，一直没有用起来，今天试了下，确实好用啊，以后就坚定不移的用起来了。

以上，完。