css3製作炫酷導覽列效果，css3炫酷導覽列

css3製作炫酷導覽列效果，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ㄒ)/~~  不過自己編譯的話在瀏覽器裡是正常的