css3旋转下拉菜单和滑动下拉菜单动画特效



132 526 176



特效描述: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

加群请备注:从官网了解到