• 欢迎访问小杰博客网站
  • 欢迎访问小杰博客网站哦

纯CSS实现图片滚动播放效果

未分类 小杰 3年前 (2015-06-11) 77次浏览 已收录 0个评论

一、效果抢先

您可以狠狠地点击这里:纯CSS下的图片轮转播放效果demo

纯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浏览器举例(下同),相关代码如下:

右下角的图片码数的切换使用了animate属性的step-end,相关CSS如下:

然后相对应的完整HTML代码如下:

说穿了很简单的,你要是有兴趣,可以去查看demo页面处的代码展示,那里更加详尽。

三、结语

本处的demo更多的是展示CSS3 animate的使用,想要在实际项目中使用还是有些问题的。例如鼠标移到相对应的序号索引小按钮上,应该会有对应的即时响应滚动效果的,现在没有。这里只是个没有交互,纯粹的展示效果而已。

虽然说本文的demo效果尚不可实际应用,但对于熟悉和了解CSS3的一些属性还是很有帮助的。我们可以使用渐进增强,在其他地方应用CSS3优秀的特性。这可以让你的网页进一步蓬荜生辉的。


小杰博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:纯CSS实现图片滚动播放效果
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址