纯css3动感导航栏代码

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

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

以下是纯css3动感导航栏代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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=gb2312" />
    <title>纯css3动感导航栏代码</title>
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="handle_a">
        <div class="head_bg">
            <div class="cl top_h">
                <div class="nov m_l l">
                    <div id="tools_point">某个栏目的提示信息</div>
                    <ul>
                        <li><a href="#" target="_blank" class="hover"><span class="db tingico liico0"></span>最新</a></li>
                        <li><a href="#" target="_blank" class="hover6"><span class="db tingico liico8"></span>电台</a></li>
                        <li><a href="#" target="_blank" class="hover3"><span class="db tingico liico5"></span>单曲</a></li>
                        <li><a href="#" target="_blank" class="hover1"><span class="db tingico liico2"></span>专辑</a></li>
                        <li><a href="#" target="_blank" class="hover4"><span class="db tingico liico6"></span>MV</a></li>
                        <li class="handle_b" onmouseover="document.all.tools_point.style.display='block'" onmouseout="document.all.tools_point.style.display='none'"><a href="#" class="hover5"><span class="db tingico liico7"></span>查找</a></li>
                        <li><a href="#" target="_blank" class="hover2"><span class="db tingico liico3"></span>留言</a></li>
                    </ul>
                </div>
                <div class="park"></div>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";body{font-weight:normal;color:#333;margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;font-family:Microsoft YaHei,Lucida Grande,"微软雅黑";font-size:12px;}
a,a:hover{color:#A60004;text-decoration:none;}
a,a:hover,.tingico{-webkit-transition:all 0.25s linear 0.01s;-moz-transition:all 0.25s linear 0.01s;-ms-transition:all 0.25s linear 0.01s;-o-transition:all 0.25s linear 0.01s;transition:all 0.25s linear 0.01s;}
ul{margin:0px;padding:0px;}
li{list-style-image:none;list-style-type:none;}
img{border:0px none #FFF;}
.l{float:left;}
.park{clear:both;line-height:0px;}
.db{display:block;}
.cl{width:950px;margin-right:auto;margin-left:auto;}
.m_l{margin-left:10px;display:inline;}
.tingico{background-image:url(../images/tingicos.png);background-repeat:no-repeat;}
.head_bg{background-image:url(../images/topbg.png);background-repeat:repeat-x;z-index:20;}
.top_h{line-height:55px;height:55px;}
.top_h a{color:#c1c1c1;}
.nov ul li{float:left;margin-left:2px;}
.nov ul li a{height:49px;width:100px;display:block;}
.nov ul li a:hover{color:#A60004;background-color:#fafafa;height:47px;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#A60004;}
.liico0,.liico2,.liico3,.liico4,.liico5,.liico6,.liico7,.liico8{height:30px;width:39px;float:left;margin-top:12px;margin-left:14px !important;margin-left:7px;}
.liico0{background-position:-76px 0px;}
.liico2{background-position:-76px -30px;height:27px;margin-top:14px;}
.liico3{background-position:-76px -57px;height:25px;margin-top:14px;}
.liico5{background-position:-76px -603px;height:31px;margin-top:12px;margin-right:4px;}
.liico6{background-position:-76px -573px;height:30px;margin-top:13px;margin-right:4px;}
.liico7{background-position:-76px -704px;height:30px;margin-top:13px;margin-right:4px;}
.liico8{background-position:-76px -764px;height:30px;margin-top:13px;margin-right:4px;}
.nov ul .handle_b a{width:112px;}
.nov ul .handle_b a:hover{color:#A60004;background-color:#000;background-image:url(../images/hover5_bg.jpg);background-repeat:no-repeat;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;line-height:43px;}
.nov ul li .hover5:hover .liico7{margin-top:8px;}
.liico4{background-position:-76px -83px;margin-left:10px !important;margin-left:4px;}
.nov ul li a:hover .liico0{background-position:-76px -113px;}
.nov ul li a:hover .liico2{background-position:-76px -143px;}
.nov ul li a:hover .liico3{background-position:-76px -170px;}
.nov ul li a:hover .liico4{background-position:-76px -195px;}
.nov ul li a:hover .liico5{background-position:-76px -664px;}
.nov ul li a:hover .liico6{background-position:-76px -634px;}
.nov ul li a:hover .liico8{background-position:-76px -734px;}
#tools_point{display:none;background-image:url(../images/tools.png);background-repeat:no-repeat;text-align:center;height:31px;width:138px;padding-top:20px;z-index:99999;position:absolute;color:#FFF;margin-left:497px;margin-top:40px;line-height:22px;}

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