纯CSS3实现图片展示特效

Web浏览器端的特效越来越让人兴奋，通过CSS和JavaScript，各种意想不到的绚丽效果都能用简单的几句代码完成。本文中要实现的一个纯CSS3的图片展示特效，以前只能用JavaScript实现，可想而知会受到多方面的限制，特别是性能。而今天我们将用简单的CSS3代码实现，你会发现它的动画效果在现代浏览器的帮助下无比的顺滑。

观看演示

HTML代码

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

<ul id="kwicks">
	<li><a class="john" href="http://en.wikipedia.org/wiki/John_lennon" title="John Lennon">John Lennon</a></li>
	<li><a class="paul" href="http://en.wikipedia.org/wiki/Paul_mccartney" title="Paul McCartney">Paul McCartney</a></li>
	<li><a class="george" href="http://en.wikipedia.org/wiki/George_harrison" title="George Harrison">George Harrison</a></li>
	<li><a class="ringo" href="http://en.wikipedia.org/wiki/Ringo_starr" title="Ringo Starr">Ringo Starr</a></li>
</ul>

CSS代码

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

/* structure */
#kwicks { width: 590px; overflow-x: hidden; }
#kwicks:hover li a { width: 100px; }
#kwicks li { 
	float: left; 
	overflow-x: hidden; 
	display: block; 
}
#kwicks li:hover a { width: 285px !important; }

/* individual kwicks */
#kwicks li a { 
	display: block; 
	text-indent: -9999px; 
	width: 134px; 
	height: 143px; 
	transition-property: width;
	transition-duration: 1s;
}

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

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

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

观看演示

5年前的时候我们根本无法用这么简单的代码实现这么漂亮的效果。随着浏览器的进步，javascript和CSS的发展，Web程序员的工作将变得越来越轻松。