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

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

HTML代码如下：

	
John Lennon
	
Paul McCartney
	
George Harrison
	
Ringo Starr

 上面的代码仅由一个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秒*/