CSS3.0實例教程:使用transition制作動感十足的圖文切換

2024-09-05 12:17:20

字體：大中小

來源：轉載

供稿：網友

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   class="iwvjtn8m0"   id="menu">		<ul>			<li>				<img src="/d/file/p/2024/09-05/6f58021b9ddb1ecea42888935f1286fb.jpg" alt="" />				<div>					<h1>源碼愛好者</h1>					<p>源碼愛好者提供編程源碼、網站源碼、書籍教程、網站模板、網頁特效代碼等。</p>				</div>			</li>			<li>				<img src="/d/file/p/2024/09-05/6f58021b9ddb1ecea42888935f1286fb.jpg" alt="" />				<div>					<h1>源碼愛好者</h1>					<p>源碼愛好者提供網站源碼、網頁素材、書籍教程、網站模板、網頁特效代碼等。</p>				</div>			</li>			<li>				<img src="/d/file/p/2024/09-05/6f58021b9ddb1ecea42888935f1286fb.jpg" alt="" />				<div>					<h1>源碼愛好者</h1>					<p>源碼愛好者提供編程源碼、網站源碼、網頁素材、書籍教程、網站模板、網頁特效代碼等。</p>				</div>			</li>			<li>				<img src="/d/file/p/2024/09-05/6f58021b9ddb1ecea42888935f1286fb.jpg" alt="" />				<div>					<h1>源碼愛好者</h1>					<p>集中營，專注HTML5、Css3、WEB3.0標準，致力于前端開發資訊的專業博客</p>				</div>			</li>					</ul>	</div></body></html>

上一篇：CSS3制作蘋果手機的Message圖標，超強大！

下一篇：CSS3制作的圖片3D旋轉特效