当前位置：首页 > 网页特效 > 导航菜单 >

有视觉冲击的CSS3菜单

时间：2013-04-01 21:14 来源：互联网作者：源码搜藏收藏推荐

<!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>有视觉冲击的CSS3菜单</title>
<style type="text/css">
*{margin:0; padding:0}
a{text-decoration:none}
ul{list-style:none}
h1{	
font-family: Verdana,Geneva,sans-serif;font-size: 50px;color: #FFFFFF; text-align:center;text-shadow: 0 1px 0 #CCCCCC, 0 2px 0 #C9C9C9, 0 3px 0 #BBBBBB, 0 4px 0 #B9B9B9, 0 5px 0 #AAAAAA, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
/*分割性*/
#box{
	width:960px; height:150px; margin:50px auto; background:url() #2C333B;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6) inset, -2px -2px 3px rgba(0, 0, 0, 0.6) inset;
	padding:20px; color:#fff
}
#box li{float:left}
#box li a{
	font-family: Arial, Helvetica, Sans-Serif; 
	display:block;padding:12px 18px;text-align:center;color:#c7ddf2;
	text-shadow:0 0 0 transparent,1px 1px 0 #111;font-size:13px;
	box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1) inset;	
	border-top:1px solid #171c22;border-bottom:1px solid #171c22;border-left:1px solid rgba(150,150,150,0.1);border-right:1px solid rgba(0,0,0,0.4);
	background:-moz-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.1)),color-stop(100%,rgba(0,0,0,0.1)));
	background:-webkit-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
	background:-o-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
	background:-ms-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%);
	background:linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%)
}
#box li:first-child a{
	border-bottom-left-radius: 4px;
    border-left: 1px solid rgba(0, 0, 0, 0.4);
    border-top-left-radius: 4px;
    box-shadow: 1px 0 0 rgba(150, 150, 150, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
#box li:last-child a{border-bottom-right-radius: 4px; border-top-right-radius: 4px;}
#box li a.current,#box li a.current:hover{
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
    border-left: 0 none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 1px 1px 5px rgba(0, 0, 0, 0.5) inset;
    color: #FFFFFF;
}
#box li a:hover{box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 1px rgba(0,0,0,0.5) inset}
</style>
</head>

<body>
<h1>yangedie</h1>
<div id="box">
	<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#" class="current">About us</a></li>
        <li><a href="#">New & Event</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Feedback</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

CSS3菜单，看上去挺有质感，有一定视觉冲击效果，而且具有鼠标响应功能，鼠标放上去，对应菜单项的背景就有所变化，测试时请大家注意，IE9以下不支持CSS3，因此请使用IE9、火狐、Chrome等浏览器。由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-daohang/1013.html