以下是 CSS3实现颜色渐变菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3实现颜色渐变菜单</title>
<link type="text/css" rel="stylesheet" media="all" href="css/styles.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<ul class="menu" rel="sam1">
<li class="active"><a href="http://www.baidu.com">Home</a></li>
<li><a href="http://www.baidu.com">About</a></li>
<li><a href="http://www.baidu.com">Blog</a></li>
<li><a href="http://www.baidu.com">Services</a></li>
<li><a href="http://www.baidu.com">Portfolio</a></li>
<li><a href="http://www.baidu.com">Contacts</a></li>
<li><a rel="external nofollow" href="http://www.baidu.com">Twitter @insic</a></li>
</ul>
</div>
<p class="title">CSS3 Experiment by INSIC</p>
</div>
<div class="wrapper">
<div class="container">
<ul class="menu">
<li><a href="http://www.baidu.com">Home</a></li>
<li><a href="http://www.baidu.com">About</a></li>
<li><a href="http://www.baidu.com">Blog</a></li>
<li><a href="http://www.baidu.com">Services</a></li>
<li><a href="http://www.baidu.com">Portfolio</a></li>
<li><a href="http://www.baidu.com">Contacts</a></li>
<li class="active"><a rel="external nofollow" href="http://www.baidu.com">Twitter @insic</a></li>
</ul>
</div>
</div>
<ul class="vertical fl" rel="ver1">
<li><a href="http://www.baidu.com">Home</a><span>Go to my Home</span></li>
<li><a href="http://www.baidu.com">About</a><span>Know a little about me</span></li>
<li><a href="http://www.baidu.com">Blog</a><span>My daily updates</span></li>
<li><a href="http://www.baidu.com">Services</a><span>This is what I do</span></li>
<li><a href="http://www.baidu.com">Portfolio</a><span>Showcase of my works</span></li>
<li><a href="http://www.baidu.com">Contacts</a><span>Say something about me</span></li>
<li><a rel="external nofollow" href="http://www.baidu.com">Twitter @insic</a><span>Follow me on twitter</span></li>
</ul>
<ul class="vertical fl">
<li><a href="http://www.baidu.com">Home</a><span>Go to my Home</span></li>
<li><a href="http://www.baidu.com">About</a><span>Know a little about me</span></li>
<li><a href="http://www.baidu.com">Blog</a><span>My daily updates</span></li>
<li><a href="http://www.baidu.com">Services</a><span>This is what I do</span></li>
<li><a href="http://www.baidu.com">Portfolio</a><span>Showcase of my works</span></li>
<li><a href="http://www.baidu.com">Contacts</a><span>Say something about me</span></li>
<li><a rel="external nofollow" href="http://www.baidu.com">Twitter @insic</a><span>Follow me on twitter</span></li>
</ul>
</body>
</html>
CSS代码(styles.css):
body{font-family:Arial;font-size:14px;text-shadow:0 1px 1px rgba(255,255,255,0.4);color:#262626;margin:0;padding:0;background:#141414;}
.wrapper{width:100%;height:80px;background:#464646;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));border-top:2px solid #939393;position:relative;margin-bottom:30px;}
.title{position:absolute;right:20px;top:10px;font-size:18px;text-transform:uppercase;}
.fl{float:left;}
.container{width:960px;margin:0 auto;}
.menu{height:80px;border-left:1px solid rgba(0,0,0,0.3);border-right:1px solid rgba(255,255,255,0.3);float:left;}
a{text-decoration:none;color:#363636;text-transform:uppercase;font-size:15px;font-weight:bold;}
ul{margin:0;padding:0;}
ul.menu li{list-style:none;float:left;height:79px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)) );background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:79px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul li a:hover{background:transparent none;}
ul[rel=sam1] li a{background:#606060;}
ul[rel=sam1] li a:hover{background:transparent none;}
ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)) );background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
/* Css for vertical sample */
ul.vertical{margin:0 20px 0 0;width:250px;border:1px solid #323232;-webkit-border-top-right-radius:8px;-moz-border-radius-topright:8px;-webkit-border-bottom-right-radius:8px;-moz-border-radius-bottomright:8px;}
ul.vertical li{list-style:none;position:relative;background:-webkit-gradient(radial,50% 100%,0,50% 100%,140,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)) );background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
ul.vertical li span{position:absolute;left:20px;top:50px;color:#151515;text-shadow:0 1px 1px rgba(255,255,255,0.2);}
ul.vertical li:first-child a,ul.vertical li:first-child{-webkit-border-top-right-radius:8px;-moz-border-radius-topright:8px;}
ul.vertical li:last-child a,ul.vertical li:last-child{-webkit-border-bottom-right-radius:8px;-moz-border-radius-bottomright:8px;}
ul.vertical li a{background:-webkit-gradient(linear,left top,left bottom,from(rgba(117,117,117,1)),to(rgba(68,68,68,1)));background:-moz-linear-gradient(top,rgba(117,117,117,1),rgba(68,68,68,1));text-align:left;border-bottom:1px solid #323232;border-top:1px solid #868686;border-right:1px solid #5a5a5a;color:#151515;-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul.vertical li a:hover{background:transparent none;}
ul.vertical[rel=ver1] li a{background:#606060;}
ul.vertical[rel=ver1] li a:hover{background:transparent none;}
分享到QQ
分享到微博
微信扫一扫
