当前位置： > 网页特效 > 导航代码 > 文章内容

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

http://www.itjxue.com 2015-08-05 00:28 来源:未知 点击次数:

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

<!DOCTYPE <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a>> <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.itjxue.comimg/1_014000.png) no-repeat bottom left; } </style> <title>CSS3模拟apple苹果官方网站导航_IT教学网www.itjxue.com提供</title> </head> <body> <div id="nav"> <ul> <li><a href="http://www.itjxue.com">Index</a></li> <li><a href="http://www.itjxue.com/">Store</a></li> <li><a href="http://www.itjxue.com/">Mac</a></li> <li><a href="http://www.itjxue.com/">iPod</a></li> <li><a href="http://www.itjxue.com/">iPhone</a></li> <li><a href="http://www.itjxue.com/">iPad</a></li> <li><a href="http://www.itjxue.com/">iTunes</a></li> <li><a href="http://www.itjxue.com/">Support</a></li> </ul> <input type="text" id="kw" value='' /> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上面代码中用到的图片：

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：网页特效代码:兼容的HTML5的网页圆角提示框

下一篇：网页导航特效代码:纯CSS3制作的面包屑导航代码

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

(责任编辑：IT教学网)

相关导航代码文章

阅读排行

专题教程

推荐导航代码文章

最新更新导航代码