純css實現Magicline Navigation(下劃線動畫導航菜單)

看別人網站的時候，看到一種導航菜單的動畫，以爲頗有意思，就仔細研究起來。

目前見過的動畫有三種：水平下劃線動畫導航、水平背景動畫導航、垂直動畫導航，他們實現思路都是同樣的，都是依賴 css3的同級通用選擇器 "~" 。

本身實現了一遍，本文簡要記錄實現的思想。

你們能夠先看看最後實現的效果：Demo點我

實現思路

HTML 結構

HTML結構沒有特殊，就是 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">&nbsp;</li>
</ul>

最後一個li空着，留着後面有用。

CSS 佈局

實現基本樣式，很少解釋：

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;
  }

實現導航下劃線

下面實現動畫部分。

下方紫色滾動條是經過，剛纔留着的最後一個li元素實現。

.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;
  }

經過絕對定位，把最後一個 li.quebec 定位到導航下方，設置寬度高度。設置 transition，當咱們改變 left, width的時候就能實現動畫。

動起來

當hover到導航上面的時候，li.quebec 就定位left到其下面。實現這個效果的是css3的同級通用選擇器 「～」

好比 A ~ B 匹配的是 任何在A元素以後的同級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; }

這裏就完成了一個 純css的下劃線動畫導航。 最後的效果：Demo查看

擴展

當咱們會實現水平的下劃線動畫導航後，實現 背景移動動畫導航 思路也是同樣，不過是li.quebec高度寬度的變化，背景透明度的變化。

垂直的動畫導航 亦是如此，改變 li.quebec 的高度寬度，經過 translateY 控制其在垂直方向的位置。

爲了效果更炫一點，咱們還能夠在hover不一樣li的時候，改變li.quebec的顏色、背景、透明度等。