本文中要实现的一个纯css3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能。而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无比的顺滑。
观看演示
HTML代码
通过上的演示,估计你已经能猜到,它的HTML结果应该是一个父元素里包含多个子元素,没错:这里用的是一个ol和其子元素li。
CSS代码
CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化。
非常简单的几段CSS代码就能实现我们要求的动作,但这里有几个事情需要注意:
这里我们只使用了几个图片,但图片的个数是不受限制的。
观看演示
文字来自:http://www.webhek.com/css-kwicks