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

2020-01-27 14:17:05

字体：大中小

来源：转载

供稿：网友

CSS3.0实例教程:使用transition制作动感十足的图文切换，相信大家应该对css3应该也有了一些了解，我这里就不在重复介绍CSS的各个属性了，今天的这个效果我用了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="/d/file/p/2020/01-27/1d67ce39445be8edc6cd81ce40fbab7e.jpg" alt="" />				<div>					<h1>源码爱好者</h1>					<p>源码爱好者提供编程源码、网站源码、书籍教程、网站模板、网页特效代码等。</p>				</div>			</li>			<li>				<img src="/d/file/p/2020/01-27/1d67ce39445be8edc6cd81ce40fbab7e.jpg" alt="" />				<div>					<h1>源码爱好者</h1>					<p>源码爱好者提供网站源码、网页素材、书籍教程、网站模板、网页特效代码等。</p>				</div>			</li>			<li>				<img src="/d/file/p/2020/01-27/1d67ce39445be8edc6cd81ce40fbab7e.jpg" alt="" />				<div>					<h1>源码爱好者</h1>					<p>源码爱好者提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等。</p>				</div>			</li>			<li>				<img src="/d/file/p/2020/01-27/1d67ce39445be8edc6cd81ce40fbab7e.jpg" alt="" />				<div>					<h1>源码爱好者</h1>					<p>集中营，专注HTML5、Css3、WEB3.0标准，致力于前端开发资讯的专业博客</p>				</div>			</li>					</ul>	</div></body></html>

上一篇：CSS3制作的图片3D旋转特效

下一篇：CSS3制作苹果手机的Message图标，超强大！