CSS3实例教程:使用transition制造动感十足的图文切换

CSS3实例教程:使用transition制作动感十足的图文切换
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3.0实例教程:使用transition制作动感十足的图文切换</title>
	<style type="text/css">
	#menu{ 
		width:960px; 
		margin:100px auto;
	}
	#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="/jscss/demoimg/wall_s1.jpg" alt="" />
				<div>
					<h1>我是标题</h1>
					<p>我是内容提供编程源码、网站源码、书籍教程、网站模板、网页特效代码等。</p>
				</div>
			</li>
			<li>
				<img src="/jscss/demoimg/wall_s1.jpg" alt="" />
				<div>
					<h1>我是标题</h1>
					<p>我是内容提供网站源码、网页素材、书籍教程、网站模板、网页特效代码等。</p>
				</div>
			</li>
			<li>
				<img src="/jscss/demoimg/wall_s1.jpg" alt="" />
				<div>
					<h1>我是标题</h1>
					<p>我是内容提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等。</p>
				</div>
			</li>
			<li>
				<img src="/jscss/demoimg/wall_s1.jpg" alt="" />
				<div>
					<h1>我是标题</h1>
					<p>我是内容，专注HTML5、Css3、WEB3.0标准，致力于前端开发资讯的专业博客</p>
				</div>
			</li>
			
		</ul>
	</div>
</body>
</html>
参考：http://www.codefans.net/jscss/code/3666.shtml?jdfwkey=zivip2
CSS3实例教程:使用transition制造动感十足的图文切换

相关推荐
