纯CSS3实现图片展示特效
浏览数：27 /
时间：2015年06月09日
本文中要实现的一个纯CSS3的图片展示特效，以前只能用JavaScript实现，可想而知会受到多方面的限制，特别是性能。而今天我们将用简单的CSS3代码实现，你会发现它的动画效果在现代浏览器的帮助下无比的顺滑。
观看演示
HTML代码
通过上的演示，估计你已经能猜到，它的HTML结果应该是一个父元素里包含多个子元素，没错：这里用的是一个ol和其子元素li。
CSS代码
CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化。
非常简单的几段CSS代码就能实现我们要求的动作，但这里有几个事情需要注意：
- 最好要设置overflow-x: hidden; ，以免出现奇怪的效果。
- 我们用两个transition-属性控制图片展示的宽度，起初都是显示一半，当鼠标悬停在某个图片上时，宽度增加。
这里我们只使用了几个图片，但图片的个数是不受限制的。
观看演示
文字来自：http://www.webhek.com/css-kwicks
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
