css3黑色酷炫导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3黑色酷炫导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>css3黑色酷炫导航</title>
    <link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <header>
        <h1></h1>
    </header>
    <div class="container">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
            <li><a href="#">Menu 5</a></li>
            <li><a href="#">Menu 6</a></li>
            <li><a href="#">Back</a></li>
            <div id="lavalamp"></div>
        </ul>
    </div>
</body>
</html>

CSS代码(menu.css):

*{margin:0;padding:0;}
body{font:14px/1.3 Arial,sans-serif;background-color:#212121;}
header,footer{text-align:center;padding:20px 0;}
header a,footer a{color:#fff;}
footer p{line-height:2;}
.container{margin:30px auto;width:957px;}
/* menu */
#nav,#nav ul{list-style:none outside none;margin:0;padding:0;}
#nav{background:url('menu_bg.png') no-repeat scroll 0 0 transparent;clear:both;font-size:12px;height:58px;padding:0 0 0 9px;position:relative;width:957px;}
#nav ul{background-color:#222;border:1px solid #222;border-radius:0 5px 5px 5px;border-width:0 1px 1px;box-shadow:0 5px 5px rgba(0,0,0,0.5);left:-9999px;overflow:hidden;position:absolute;top:-9999px;z-index:2;-moz-transform:scaleY(0);-ms-transform:scaleY(0);-o-transform:scaleY(0);-webkit-transform:scaleY(0);transform:scaleY(0);-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;-webkit-transform-origin:0 0;transform-origin:0 0;-moz-transition:-moz-transform 0.1s linear;-ms-transition:-ms-transform 0.1s linear;-o-transition:-o-transform 0.1s linear;-webkit-transition:-webkit-transform 0.1s linear;transition:transform 0.1s linear;}
#nav li{background:url('menu_line.png') no-repeat scroll right 5px transparent;float:left;position:relative;}
#nav li a{color:#FFFFFF;display:block;float:left;font-weight:normal;height:30px;padding:23px 20px 0;position:relative;text-decoration:none;text-shadow:1px 1px 1px #000000;}
#nav li:hover > a{color:#00B4FF;}
#nav li:hover,#nav a:focus,#nav a:hover,#nav a:active{background:none repeat scroll 0 0 #121212;outline:0 none;}
#nav ul li{background:none;width:100%;}
#nav ul li a{float:none;}
#nav ul li:hover > a{background-color:#121212;color:#00B4FF;}
#lavalamp{background:url('lavalamp.png') no-repeat scroll 0 0 transparent;height:16px;left:13px;position:absolute;top:0px;width:64px;-moz-transition:all 300ms ease;-ms-transition:all 300ms ease;-o-transition:all 300ms ease;-webkit-transition:all 300ms ease;transition:all 300ms ease;}
#lavalamp:hover{-moz-transition-duration:3000s;-ms-transition-duration:3000s;-o-transition-duration:3000s;-webkit-transition-duration:3000s;transition-duration:3000s;}
#nav li:nth-child(1):hover ~ #lavalamp{left:13px;}
#nav li:nth-child(2):hover ~ #lavalamp{left:90px;}
#nav li:nth-child(3):hover ~ #lavalamp{left:170px;}
#nav li:nth-child(4):hover ~ #lavalamp{left:250px;}
#nav li:nth-child(5):hover ~ #lavalamp{left:330px;}
#nav li:nth-child(6):hover ~ #lavalamp{left:410px;}
#nav li:nth-child(7):hover ~ #lavalamp{left:490px;}
#nav li:nth-child(8):hover ~ #lavalamp{left:565px;}

附件:下载该文件资源,减少时间成本(增值服务)