今天主要利用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ㄒ)/~~ ?不過自己編譯的話在瀏覽器里是正常的。

轉載于:https://www.cnblogs.com/wanqi007/p/5809899.html

總結

以上是生活随笔為你收集整理的css3制作炫酷导航栏效果 转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。