如何使用純CSS製作特效導航條？-css教學-PHP中文網

首頁

web前端

css教學

如何使用純CSS製作特效導航條？

青灯夜游

Oct 11, 2018 pm 05:43 PM

csscss特效導航條

本文要跟大家介紹如何使用純CSS製作特效導航條，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

先上張圖，看看效果：

在繼續閱讀下文之前，你可以先緩一緩。試著思考上面的效果或動手嘗試一下，不借助 JS ，能否巧妙的實現上述效果。

OK，繼續。這個效果是我在業務開發的過程中遇到的一個類似的小問題。其實即便讓我借助 Javascript ，我的第一個反應也是，感覺很麻煩。所以我一直在想，有沒有可能只用 CSS 完成這個效果呢？

定義需求

我們定義簡單的規則，要求如下：

不可思议的CSS
导航栏
光标小下划线跟随
PURE CSS
Nav Underline

導覽列目的li 的寬度是不固定的
當從導航的左側li 移向右側li，下劃線從左往右移動。同理，當從導航的右側 li 移向左側 li，底線從右往左移動。

實現需求

第一眼看到這個效果，感覺這個跟隨動畫，僅靠 CSS 是不可能完成的。如果想只用 CSS 實現，只能另闢蹊徑，用一些討巧的方法。好，以下就借助一些奇技淫巧，使用 CSS 一步一步完成這個效果。分析一下困難：

寬度不固定

第一個困難點， li 的寬度是不固定的。所以，我們可能需要從 li 本身的寬度上做文章。既然每個 li 的寬度不一定，那麼它對應的下劃線的長度，肯定是要和他本身相適應的。自然而然，我們就會想到要用它的 border-bottom 。

li { border-bottom: 2px solid #000;}

那麼，可能現在是這樣子的（li 之間是相連在一起的，li 間的間隙使用padding 產生）：

##當然，這裡一開始都是沒有底線的，所以我們可能需要把他們給隱藏起來。

li { border-bottom: 0px solid #000;}

推翻重來，借助偽元素

這樣好像不行，因為隱藏之後，hover li 的時候，需要下劃線動畫，而 li 本身肯定是不能移動的。所以，我們考慮借助偽元素。將下劃線作用到每個 li 的偽元素之上。

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #000;
}

下面考慮第一步的動畫，hover 的時候，底線要從一側運動展開。所以，我們利用絕對定位，將li 的偽元素的寬度設為0，在hover 的時候，寬度從width: 0 -> width: 100%，CSS 如下：

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
}
li:hover::before {
    width: 100%;
}

得到，如下效果：

左移左出，右移右出

OK，感覺離成功近了一步。現在還剩下一個最難的問題：

如何讓線條跟隨遊標的移動動作，實現當從導航的左側 li 移向右側 li，下劃線從左往右移動。同理，當從導航的右側 li 移向左側 li，底線從右往左移動。

我們仔細看看，現在的效果：

當從第一個li 切換到第二個li 的時候，第一個li 下劃線收回的方向不正確。所以，可以能我們需要將下劃線的初始位置位移一下，設定為left: 100%，這樣每次下劃線收回的時候，第一個li 就正確了：

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
}
li:hover::before {
  left: 0;
  width: 100%;
}

看看效果：

額，仔細比較兩張圖，第二種效果其實是撿了芝麻丟了西瓜。第一個 li 的方向是正確了，但是第二個 li 底線的移動方向又錯了。

神奇的~ 選擇符

所以，我們迫切需要一種方法，能夠不改變當前hover 的li 的下劃線移動方式卻能改變它下一個li 的下劃線的移動方式（好繞口）。

沒錯了，這裡我們可以藉助 ~ 選擇符，完成這個艱難的使命，也是這個例子中，最最重要的一環。

對於目前 hover 的 li ，其對應偽元素的底線的定位是 left: 100%，而對於 li:hover ~ li::before，它們的定位是 left: 0。 CSS 程式碼大致如下：

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
  transition: 0.2s all linear;
}
li:hover::before {
  width: 100%;
  left: 0;
}
li:hover ~ li::before {
  left: 0;
}

至此，我們想要的效果就實現拉！撒花。看看：

效果不错，就是有点僵硬，我们可以适当改变缓动函数以及加上一个动画延迟，就可以实现上述开头里的那个效果了。当然，这些都是锦上添花的点缀。（以上非原创，转自网络）

完整代码实例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        *{margin:0;padding:0;}
        a{text-decoration:none;color:#000;}
        ul{margin-top:100px;}
        li{float:left;list-style:none;padding:0 20px;cursor:pointer;position:relative;}
        li::before {
          content: "";
          position: absolute;
          top: 0;
          left: 100%;
          width: 0;
          height: 100%;
          border-bottom: 2px solid #4C7C9C;
          transition: 0.2s all linear;
          z-index:-1;
        }
        li:hover::before {
          width: 100%;
          left: 0;
        }
        li:hover ~ li::before {
          left: 0;
        }        
    </style>
    <body>
        <ul>
            <li><a href="http://www.baidu.com">11111</a></li>
            <li><a href="http://www.taobao.com">22222</a></li>
            <li><a href="http://www.sina.com">33333</a></li>
            <li><a href="http://www.jd.com">44444</a></li>
            <li><a href="http://www.360.com">55555</a></li>
        </ul>
    </body>
</html>

实际项目中若li里面有a标签出现不能点击的情况，注意检查伪类和li的层级关系，设置好各自z-index值。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程，更多相关教程请访问 CSS3视频教程！

更多炫酷CSS3、javascript特效代码，尽在：javascript特效大全

以上是如何使用純CSS製作特效導航條？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除