导航特效代码:HTML5+CSS3模拟apple官网导航

2013-08-033lian11 的分享

用HTML5+CSS3制作的网页导航特效,此代码是模仿的apple苹果官方网站的导航,比较粗糙一些,喜欢的网页教学网的网友可以自己美化代码达到自己想要的效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<style type="text/css">
body { font-family:Arial; font-size:12px; color:#4b4b4b; text-align:center; }
* { padding:0px; margin:0px; }
ul { list-style:none; }
#nav { position:relative; margin-left:auto; margin-right:auto; text-align:left; width:960px; height:38px; margin-top:15px; overflow:hidden;
border:0px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
box-shadow: inset 0 0 1px #fff;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
background:#c2c2c2;
background:-moz-linear-gradient(center top, rgba(100,100,100,1), rgba(113,113,113,0.9) 49%, rgba(90,90,90,0.9) 50%, rgba(116,116,116,1));
background:-webkit-gradient(linear, center top, center bottom, from(rgba(100,100,100,1)), color-stop(49%,rgba(113,113,113,0.9)), color-stop(50%,rgba(90,90,90,0.9)), to(rgba(116,116,116,1)));
background:-o-linear-gradient(top, rgba(100,100,100,1), rgba(113,113,113,0.9) 49%, rgba(90,90,90,0.9) 50%, rgba(116,116,116,1));
}
#nav li { display:block; color:#ffffff; width:100px; height:36px; text-align:center; border-right:solid 1px #5b5b5b; float:left; padding-top:8px; }
#nav li a { text-shadow:#000 1px 1px 1px; color:#ffffff; font-size:13px; text-decoration:none;
font-family:"Lucida Sans Unicode"; vertical-align:middle;
-webkit-transition:-webkit-transform 0.6s linear, color 0.3s linear, text-shadow 0.4s linear;
-moz-transition:-moz-transform 0.6s linear, color 0.3s linear, text-shadow 0.4s linear;
-o-transition:-o-transform 0.6s linear, color 0.3s linear, text-shadow 0.4s linear;
}
#nav li a:hover {
-webkit-transform:scale(1.5,1);
-moz-transform:scale(1.5,1);
-o-transform:scale(1.5,1);
color:darkred;
text-shadow:#111111 2px 2px 2px;
}
#nav input { display:block; width:120px; float:left; margin-top:8px; background:transparent; height:20px; margin-left:15px;
vertical-align:middle; font-family:"sans-serif"; font-size:14px; text-indent:26px;
border:0px;
border-bottom:inset 1px #353535;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-o-border-radius:8px;
box-shadow:inset 0px 2px 1px #353535;
-moz-box-shadow:inset 0px 2px 1px #353535;
-webkit-box-shadow:inset 0px 2px 1px #353535;
background:url(http://www.webjx.com/files/120703/1_014000.png) no-repeat bottom left;
}
</style>
<title>CSS3模拟apple苹果官方网站导航_网页教学网www.webjx.com提供</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.webjx.com">Index</a></li>
<li><a href="http://www.webjx.com/">Store</a></li>
<li><a href="http://www.webjx.com/">Mac</a></li>
<li><a href="http://www.webjx.com/">iPod</a></li>
<li><a href="http://www.webjx.com/">iPhone</a></li>
<li><a href="http://www.webjx.com/">iPad</a></li>
<li><a href="http://www.webjx.com/">iTunes</a></li>
<li><a href="http://www.webjx.com/">Support</a></li>
</ul>
<input type="text" id="kw" value='' />
</div>
</body>
</html>

下一篇:返回列表

推荐

TA发布的帖子

576

收藏

575