码迷,mamicode.com
首页 > Web开发 > 详细

纯CSS3实现图片展示特效

时间:2015-01-07 14:39:53      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能。而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无比的顺滑。

观看演示

HTML代码

通过上的演示,估计你已经能猜到,它的HTML结果应该是一个父元素里包含多个子元素,没错:这里用的是一个ol和其子元素li。

技术分享


CSS代码

CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化。

技术分享



非常简单的几段CSS代码就能实现我们要求的动作,但这里有几个事情需要注意:

  • 最好要设置overflow-x: hidden; ,以免出现奇怪的效果。
  • 我们用两个transition-属性控制图片展示的宽度,起初都是显示一半,当鼠标悬停在某个图片上时,宽度增加。



这里我们只使用了几个图片,但图片的个数是不受限制的。

观看演示

 

文字来自:http://www.webhek.com/css-kwicks

 

纯CSS3实现图片展示特效

标签:

原文地址:http://www.cnblogs.com/Better-Me/p/4208191.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!