首頁  >  文章  >  web前端  >  如何使用純CSS製作特效導航條?

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

青灯夜游
青灯夜游轉載
2018-10-11 17:43:222444瀏覽

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

先上張圖,看看效果:

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

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

定義需求

我們定義簡單的規則,要求如下:

ff6d136ddc5fdfeffaf53ff6ee95f185
  25edfb22a4f469ecb59f1190150159c6不可思议的CSSbed06894275b65c1ab86501b08a632eb
  25edfb22a4f469ecb59f1190150159c6导航栏bed06894275b65c1ab86501b08a632eb
  25edfb22a4f469ecb59f1190150159c6光标小下划线跟随bed06894275b65c1ab86501b08a632eb
  25edfb22a4f469ecb59f1190150159c6PURE CSSbed06894275b65c1ab86501b08a632eb
  25edfb22a4f469ecb59f1190150159c6Nav Underlinebed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
  • 導覽列目的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中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除