html 图片自动滚动播放,小卖弄：纯CSS实现图片滚动播放效果

一、效果抢先

如果您手头上的浏览器是FireFox6+，或者教新版本的Chrome或是Safari浏览器，就可以看到类似上面截图的效果。完全CSS挑大梁，JS请假回家相亲去了。

二、原理简述

显然，要实现demo所示的效果，CSS2.1就算是天天蹲在茅坑上，也拉不出一坨冰激凌形状的屎，必须使用CSS3，因此，demo页面的效果只能跟元老级的IE浏览器说“搞咩纳塞”了。

这里应用的CSS3属性是animate动画。关于CSS3 的animate属性，可以参考“CSS3 Transitions, Transforms和Animation使用简介与应用展示”一文，其中有非常详尽的讲解。

本文之所以又拿CSS3动画说事，是为了补充CSS3 animate属性下的新出来的个关键字属性step。之前我们应用animate动画，出现的效果都是很平滑很流畅的。而step的作用是分步实现。好像舞蹈中优美流畅的华尔兹和动感的机械舞。

例如下面文字打印，光标闪闪的效果：

我知道的使用有两个，一个是step-end，即一次性动画结束，另外一个就类似于steps(30, end)，一个动画要顿30次完成。本文的图片滚动demo部分右下角的序号就使用了step-end。

上下滚动的实现很简单，设置对应的时间段(百分比)和对应的列表的垂直位置即可。以FireFox浏览器举例(下同)，