本文要跟大家介紹如何使用純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中文網其他相關文章!