CSS3实现横向展示图片滑动展示效果(转载)

一个使用CSS3动画效果实现的图片宽度 横向展开的效果。

HTML代码如下：

<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>

 上面的代码仅由一个ul组成，对应的CSS代码如下：

/*横向展示关键是添加:  overflow-x:hidden,避免出现异常*/
#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; }

/* 实现宽度变大的动态过程*/
#kwicks li a { 
	display: block; 
	text-indent: -9999px; 
	width: 134px; 
	height: 143px; 
	transition-property: width;
	transition-duration: 1s;
}

 非常简单的一个动画效果，代码解析：

transition-property：width; /*会产生带有平滑改变元素宽度的过渡效果*/
transition-duration: 1s;  /*过渡效果持续1秒*/