HTML5网页设计

图片效果

CSS3的transition制作动态图文切换效果

时间:2014-12-02 13:48来源:未知作者:user点击:
通过CSS3使用transition属性制作动感的图文切换展示效果。

通过CSS3使用transition属性制作动感的图文切换展示效果。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3的transition制作动态图文切换效果 - ShejiCool.com</title>
	<style type="text/css">
	#menu{ 
		width:960px; 
		margin:100px auto;
		overflow:hidden;
	}
	#menu li{	
		float:left;
		width:200px;
		height:288px;
		margin-left:10px;
		position:relative; 
		overflow:hidden;
	}
	#menu li div{	
		position:absolute; 
		width:180px; 
		height:268px; 
		padding:10px;
		text-align:center; 
		background: rgba(0,0,0, 1);
		opacity: 0;
		-webkit-transition: color 0.2s linear;
		-moz-transition: color 0.2s linear;
		-o-transition: color 0.2s linear;
		-ms-transition: color 0.2s linear;
		transition: color 0.2s linear;
	}
	#menu li:hover div{
		background: rgba(0,0,0, 0.5); 
		opacity: 1;
		color:#ccc;
	}
	#menu li:first-child div,#menu li:nth-child(3) div{
		-webkit-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
		-moz-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
		-o-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
		-ms-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
		transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
	}
	#menu li:first-child div{
		left:0; 
		top:288px; 
	}
	#menu li:first-child:hover div,#menu li:nth-child(3):hover div{
		top:0;
	}
	#menu li:nth-child(2) div,#menu li:last-child div{
		-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
		-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
		-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
		-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
		transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;	
	}
	#menu li:nth-child(2) div{
		left:-200px; 
		top:0; 
	}
	#menu li:nth-child(2):hover div,#menu li:last-child:hover div{
		left:0;
	}
	#menu li:nth-child(3) div{
		left:0; 
		top:-288px; 
	}
	#menu li:last-child div{
		left:200px; 
		top:0; 
	}
	#menu h1{
		font-size:16px; 
		padding-top:60px;
		font-weight:bold;
	}
	#menu p{
		text-align:left;
	}
	</style>
</head>
<body>
	<div id="menu">
		<ul>
			<li>
				<img src="http://www.shejicool.com/images/demo/400_1.jpg" alt="" />
				<div>
					<h1>红叶传情</h1>
					<p>内容信息简介内容信息简介内容信息简介内容信息简介内容信息简介。</p>
				</div>
			</li>
			<li>
				<img src="http://www.shejicool.com/images/demo/400_2.jpg" alt="" />
				<div>
					<h1>野花绽放</h1>
					<p>内容信息简介内容信息简介内容信息简介内容信息简介内容信息简介。</p>
				</div>
			</li>
			<li>
				<img src="http://www.shejicool.com/images/demo/400_3.jpg" alt="" />
				<div>
					<h1>往事如茶</h1>
					<p>内容信息简介内容信息简介内容信息简介内容信息简介内容信息简介。</p>
				</div>
			</li>
			<li>
				<img src="http://www.shejicool.com/images/demo/400_4.jpg" alt="" />
				<div>
					<h1>油菜花开</h1>
					<p>内容信息简介内容信息简介内容信息简介内容信息简介内容信息简介。</p>
				</div>
			</li>
			
		</ul>
	</div>
    <p style="text-align:center">请使用支持CSS3的浏览器测试效果!</p>
</body>
</html>
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐