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



174 693 232



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



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 图片翻转旋转 html5动画导航菜单 二级导航菜单 滑动选项卡切换 文字翻转旋转 html5图片动画 下拉导航菜单 图片滑动 旋转木马 html5文字动画 竖直导航菜单 文字滑动 图标导航菜单 html5表情动画 滑动手风琴 固定导航菜单 html5线条动画 滑动星星打分 侧边导航菜单 树形导航菜单 html5飘落动画 网址导航菜单 html5光标动画 导航菜单插件 文字导航菜单 html5悬停动画 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动滑过 加载动画 html5弹窗动画 转动旋转翻转 html5动画h5动画 导航菜单导航条 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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