看別人網(wǎng)站的時(shí)候，看到一種導(dǎo)航菜單的動(dòng)畫，覺(jué)得很有意思，就仔細(xì)研究起來(lái)。

目前見(jiàn)過(guò)的動(dòng)畫有三種：水平下劃線動(dòng)畫導(dǎo)航、水平背景動(dòng)畫導(dǎo)航、垂直動(dòng)畫導(dǎo)航，他們實(shí)現(xiàn)思路都是一樣的，都是依賴 css3的同級(jí)通用選擇器 "~" 。

自己實(shí)現(xiàn)了一遍，本文簡(jiǎn)要記錄實(shí)現(xiàn)的思想。

大家可以先看看最后實(shí)現(xiàn)的效果：Demo點(diǎn)我

實(shí)現(xiàn)思路

HTML 結(jié)構(gòu)

HTML結(jié)構(gòu)沒(méi)有特殊，就是 ul -> li:

<ul class="a">  <li class="n1"><a href="#">Navigator A</a></li>  <li class="n2"><a href="#">Navigator B</a></li>  <li class="n3 selected"><a href="#">Navigator C</a></li>  <li class="n4"><a href="#">Navigator D</a></li>  <li class="quebec"> </li></ul>

最后一個(gè)li空著，留著后面有用。

CSS 布局

實(shí)現(xiàn)基本樣式，不多解釋：

  li {      list-style: none outside;      position: relative;      z-index: 1;      float: left;      padding: 0 0 0 0;  }  li a {      position: relative;      top: 5px;      display: block;      margin: 0 0;      border-bottom: 5px solid transparent;      padding: 10px 0;      text-align: center;      text-decoration: none;  }  .selected a {      border-bottom: 5px solid #cfd0d0;      color: #340e56;  }

實(shí)現(xiàn)導(dǎo)航下劃線

下面實(shí)現(xiàn)動(dòng)畫部分。

下方紫色滾動(dòng)條是通過(guò)，剛才留著的最后一個(gè)li元素實(shí)現(xiàn)。

 .quebec {      position: absolute;      bottom: -5px;      left: 0;      z-index: 3;      margin: 0;      border: 0;      width: 5px;      height: 5px;      padding: 0;      overflow: hidden;      text-indent: -9999em;      background: #511d7f;      -webkit-transition-property: left, width;      -moz-transition-property: left, width;      -ms-transition-property: left, width;      -o-transition-property: left, width;      transition-property: left, width;      -webkit-transition-duration: .5s;      -moz-transition-duration: .5s;      -ms-transition-duration: .5s;      -o-transition-duration: .5s;      transition-duration: .5s;  }

通過(guò)絕對(duì)定位，把最后一個(gè) li.quebec 定位到導(dǎo)航下方，設(shè)置寬度高度。設(shè)置 transition，當(dāng)我們改變 left, width的時(shí)候就能實(shí)現(xiàn)動(dòng)畫。

動(dòng)起來(lái)

當(dāng)hover到導(dǎo)航上面的時(shí)候，li.quebec 就定位left到其下面。實(shí)現(xiàn)這個(gè)效果的是css3的同級(jí)通用選擇器 “～”

比如 A ~ B 匹配的是 任何在A元素之后的同級(jí)B元素。

  .n1:hover ~ li.quebec { left: 0; width: 95px; }  .n2:hover ~ li.quebec { left: 100px; width: 95px; }  .n3:hover ~ li.quebec { left: 192px; width: 95px; }  .n4:hover ~ li.quebec { left: 285px; width: 95px; }

這里就完成了一個(gè) 純css的下劃線動(dòng)畫導(dǎo)航。 最后的效果：Demo查看

擴(kuò)展

當(dāng)我們會(huì)實(shí)現(xiàn)水平的下劃線動(dòng)畫導(dǎo)航后，實(shí)現(xiàn) 背景移動(dòng)動(dòng)畫導(dǎo)航 思路也是一樣，不過(guò)是li.quebec高度寬度的變化，背景透明度的變化。

垂直的動(dòng)畫導(dǎo)航 亦是如此，改變 li.quebec 的高度寬度，通過(guò) translateY 控制其在垂直方向的位置。

為了效果更炫一點(diǎn)，我們還可以在hover不同li的時(shí)候，改變li.quebec的顏色、背景、透明度等。