css3制作炫酷導航欄效果

今天主要利用hover選擇器。鼠標滑過查看效果。

一。普通導航欄

• Home
• Content
• Service
• Team
• Contact

 

 

對於這種普通的導航欄，只是鼠標滑過的時候顏色會變，所以思路變得很簡單。

（1）使用ul標簽布局

（2）鼠標經過事件

<div id="demo1">
        <ul>
            <li>Home</li>
            <li>Content</li>
            <li>Service</li>
            <li>Team</li>
            <li>Contact</li>
        </ul>
    </div>

*{
    padding:0;
    margin:0;
    list-style:none;
    text-decoration:none;
}
a{
    color:#fff;
}
#demo1{
    width:600px;
}
#demo1 ul li{
    float:left;
    width:100px;
    height:50px;
    text-align:center;
    background:#ccc;
    line-height:50px;
    color:#FFF;
}
#demo1 ul li:hover{
    background:#999;
}

（二）括號類導航欄

• Home
• Content
• Service
• Team
• Contact

對於導航欄的排版這里就不多說了，可以看到當鼠標經過的時候會從文字中出現括號，思路：

（1）當無鼠標經過事件時，括號其實是有的，只不多它處於隱形狀態在文字中間

（2）當鼠標經過時，括號從中間移動到兩邊，並且從隱形變為顯示。

 <div id="demo2">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Content</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

#demo2{
    width:600px;
    height:50px;
    margin:20px auto;
}
#demo2 ul li{
    position:relative;
    float:left;
    width:100px;
    height:50px;
    text-align:center;
    line-height:50px;
    background:#000;
}
#demo2 ul li a:before{
    content:"[";
    margin-right:10px;
    transform:translateX(20px);
    -webkit-transform:translateX(20px);
    -moz-transform:translateX(20px);
    -ms-transform:translateX(20px);
    
}
#demo2 ul li a:after{
    content:"]";
    margin-left:10px;
    transform:translateX(-20px);
    -webkit-transform:translateX(-20px);
    -moz-transform:translateX(-20px);
    -ms-transform:translateX(-20px);
}
#demo2 ul li a:before,#demo2 ul li a:after{
    display:inline-block;
    opacity:0;
    transition:transform 0.3s, opacity 0.2s;
    -moz-transition:transform 0.3s, opacity 0.2s;
    -webkit-transition:transform 0.3s, opacity 0.2s;
    -ms-transition:transform 0.3s, opacity 0.2s;
}
#demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

三。滑動導航欄

• Home
• Content
• Service
• Team
• Contact

 

 

從演示效果來看要注意兩點

（1）鼠標經過時有橫向從上到下

（2）鼠標經過時文字從上到下並且變換顏色

這就和上一個例子很像了

（1）橫線其實是存在的，只不過鼠標沒有經過時是在文字上方且透明的，鼠標經過時橫線由上到下。

（2）文字這里就要定義一個動畫了，因為在鼠標經過時它體現了三種狀態：

　　①文字從現位置划下

　　②文字從出現在上方

　　③文字從上方滑到現位置

 <div id="demo3">
        <ul>
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>Content</span></a></li>
            <li><a href="#"><span>Service</span></a></li>
            <li><a href="#"><span>Team</span></a></li>
            <li><a href="#"><span>Contact</span></a></li>
        </ul>
    </div>

#demo3 ul li{
    float:left;
    margin:0 25px;
    position:relative;
}
#demo3 ul li a{
    color:#D8761E;
    font-family:'Righteous', cursive;
    display:block;
    padding:10px 0;
}
#demo3 ul li span{
    display:block;
}
#demo3 ul li a:before{
    content:"";
    position:absolute;
    width:100%;
    height:3px;
    background:#D8761E;
    bottom:0;
    opacity:0;
    -webkit-transform: translate3d(0, -40px, 0);
    transform: translate3d(0, -40px, 0);
    -webkit-transition: -webkit-transform 0s 0.3s, opacity 0.2s;
    transition: transform 0s 0.3s, opacity 0.2s;
}
#demo3 ul li a:hover::before{
    opacity:1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.1s;
    transition: transform 0.5s, opacity 0.1s;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
}
#demo3 ul li a:hover span{
    color:#510301;
    -webkit-animation: anim-francisco 0.3s forwards;
    animation: anim-francisco 0.3s forwards;
}
@-webkit-keyframes anim-francisco {
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes anim-francisco {
    50% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    51% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

這里注意的是不能給標簽設置寬高，因為一旦設置寬高會影響文字滑動路線，變得很誇張。這里加span也是這個原因，鼠標經過a時讓span以a為參照進行滑動。

里面的標簽就不解釋了，自己查效果會更好哦。

我好無奈呀，用這個顯示效果a標簽和li的默認樣式竟然不能取消，誰能告訴我為什么/(ㄒoㄒ)/~~  不過自己編譯的話在瀏覽器里是正常的