css3旋轉下拉菜單和滑動下拉菜單動畫特效



138 550 184



特效描述:css3 旋轉下拉菜單 滑動下拉菜單 動畫特效,css3 旋轉的下拉菜單和延遲的滑動下拉菜單 。適合于初學者

代碼結構

1. HTML代碼

?<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5和css3特效導航</title>
<style type="text/css">
body{background:url("images/1.jpg") no-repeat 50% 0;}
*{margin:0px;padding:0px;}
nav{
	width:916px;height:46px;margin:50px auto;
	background:-webkit-linear-gradient(top,rgba(40,40,40,0.8) 0%,rgba(55,55,55,0.8) 50%,rgba(23,23,23,0.9) 51%);
	background:-moz-linear-gradient(top,rgba(40,40,40,0.8) 0%,rgba(55,55,55,0.8) 50%,rgba(23,23,23,0.9) 51%);
	background:-ms-linear-gradient(top,rgba(40,40,40,0.8) 0%,rgba(55,55,55,0.8) 50%,rgba(23,23,23,0.9) 51%);
	background:-o-linear-gradient(top,rgba(40,40,40,0.8) 0%,rgba(55,55,55,0.8) 50%,rgba(23,23,23,0.9) 51%);
	/*設置漸變色,top,從頭部開始,第一種顏色,第二種顏色,第三種顏色*/
	box-shadow:0 0 20px #fff;
	border-radius:5px;
}
nav ul li{list-style:none;width:130px;height:46px;float:left;border-right:1px solid #000;line-height:46px;text-align:center;}
nav ul li a{font-family:"微軟雅黑";font-size:16px;color:#fff;text-decoration:none;}
nav ul li:hover{background:rgba(10,5,5,0.7);}
.first{border-radius:5px 0 0 5px;}
.last{border-radius:0 5px 5px 0;}
nav .hid li{border:none;background:rgba(10,5,5,0.4);}
nav .hid li:hover{background:rgba(10,5,5,0.6);}
nav .hid1{height:0px;overflow:hidden;transition:.5s;} /*把高度設置為0,hover后改變高度,并且設置出來后的速度 */
nav ul li:hover .hid1{height:138px;}
nav .hid2{display:none;}
nav ul li:hover .hid2{display:block;-webkit-animation:aa 1s;-moz-animation:aa 1s;} /*調用動畫函數,并且1S執行 */
@-webkit-keyframes aa{ /*寫一個動畫函數*/
	from{-webkit-transform:rotateY(0deg);}
	to{-webkit-transform:rotateY(360deg);}
}
@-moz-keyframes aa{  /*寫一個動畫函數*/
	from{-moz-transform:rotateY(0deg);}
	to{-moz-transform:rotateY(360deg);}
}
</style>
</head>	
<body style="background-color:#181e2a;">
<nav>
<ul>
	<li class="first">
		<a href="#">前端設計</a>
		<ul class="hid hid1"> 
			<li><a href="#">HTML5</a></li>
			<li><a href="#">JavaScript</a></li>
			<li><a href="#">CSS3</a></li>
		</ul>
	</li>
	<li>
		<a href="#">網頁設計</a>
		<ul class="hid hid1"> 
			<li><a href="#">HTML5</a></li>
			<li><a href="#">JavaScript</a></li>
			<li><a href="#">CSS3</a></li>
		</ul>
	</li>
	<li><a href="#">動畫設計</a></li>
	<li>
		<a href="#">編程設計</a>
		<ul class="hid hid2"> 
			<li><a href="#">C++</a></li>
			<li><a href="#">JAVA</a></li>
			<li><a href="#">PHP</a></li>
		</ul>
	</li>
	<li><a href="#">手機設計</a></li>
	<li>
		<a href="#">開源設計</a>
		<ul class="hid hid2"> 
			<li><a href="#">C++</a></li>
			<li><a href="#">JAVA</a></li>
			<li><a href="#">PHP</a></li>
		</ul>
	</li>
	<li class="last"style="border:none;"><a href="#">我的博客</a></li>
</ul>
</nav>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 收縮菜單 收縮導航 右鍵菜單 導航切換 菜單切換 浮動菜單 浮動導航 滑動導航菜單 滑動導航 滑動菜單 滾動導航菜單 滾動菜單 滾動導航 加載動畫 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 h5彈窗動畫 html5彈窗動畫 旋轉翻轉 旋轉 翻轉 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 h5按鈕動畫 html5按鈕動畫 滑動導航菜單 滑動導航 滑動菜單 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 二級菜單 二級導航菜單 二級導航 文字翻轉 文字旋轉 下拉列表 下拉菜單 下拉導航 下拉導航菜單 下拉菜單導航 響應式下拉菜單 固定導航 固定菜單
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子