本文給大家介紹如何使用純CSS制作特效導(dǎo)航條,有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你們有所幫助。
創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司,自成立以來(lái)公司不斷探索創(chuàng)新,始終堅(jiān)持為客戶提供滿意周到的服務(wù),在本地打下了良好的口碑,在過(guò)去的10年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶,如報(bào)廢汽車回收等企業(yè)單位,完善的項(xiàng)目管理流程,嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶的一致贊譽(yù)。
先上張圖,看看效果:
在繼續(xù)閱讀下文之前,你可以先緩一緩。嘗試思考一下上面的效果或者動(dòng)手嘗試一下,不借助 JS ,能否巧妙的實(shí)現(xiàn)上述效果。
OK,繼續(xù)。這個(gè)效果是我在業(yè)務(wù)開發(fā)的過(guò)程中遇到的一個(gè)類似的小問(wèn)題。其實(shí)即便讓我借助 Javascript ,我的第一反應(yīng)也是,感覺(jué)很麻煩啊。所以我一直在想,有沒(méi)有可能只使用 CSS 完成這個(gè)效果呢?
我們定義一下簡(jiǎn)單的規(guī)則,要求如下:
<ul> <li>不可思議的CSS</li> <li>導(dǎo)航欄</li> <li>光標(biāo)小下劃線跟隨</li> <li>PURE CSS</li> <li>Nav Underline</li> </ul>
導(dǎo)航欄目的 li 的寬度是不固定的
當(dāng)從導(dǎo)航的左側(cè) li 移向右側(cè) li,下劃線從左往右移動(dòng)。同理,當(dāng)從導(dǎo)航的右側(cè) li 移向左側(cè) li,下劃線從右往左移動(dòng)。
第一眼看到這個(gè)效果,感覺(jué)這個(gè)跟隨動(dòng)畫,僅靠 CSS 是不可能完成的。 如果想只用 CSS 實(shí)現(xiàn),只能另辟蹊徑,使用一些討巧的方法。 好,下面就借助一些奇技淫巧,使用 CSS 一步一步完成這個(gè)效果。分析一下難點(diǎn):
第一個(gè)難點(diǎn), li 的寬度是不固定的。所以,我們可能需要從 li 本身的寬度上做文章。 既然每個(gè) li 的寬度不一定,那么它對(duì)應(yīng)的下劃線的長(zhǎng)度,肯定是是要和他本身相適應(yīng)的。自然而然,我們就會(huì)想到使用它的 border-bottom 。
li { border-bottom: 2px solid #000;}
那么,可能現(xiàn)在是這樣子的(li 之間是相連在一起的,li 間的間隙使用 padding 產(chǎn)生):
當(dāng)然,這里一開始都是沒(méi)有下劃線的,所以我們可能需要把他們給隱藏起來(lái)。
li { border-bottom: 0px solid #000;}
這樣好像不行,因?yàn)殡[藏之后,hover li 的時(shí)候,需要下劃線動(dòng)畫,而 li 本身肯定是不能移動(dòng)的。所以,我們考慮借助偽元素。將下劃線作用到每個(gè) li 的偽元素之上。
li::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom: 2px solid #000; }
下面考慮第一步的動(dòng)畫,hover 的時(shí)候,下劃線要從一側(cè)運(yùn)動(dòng)展開。所以,我們利用絕對(duì)定位,將 li 的偽元素的寬度設(shè)置為0,在 hover 的時(shí)候,寬度從 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,感覺(jué)離成功近了一步。現(xiàn)在還剩下一個(gè)最難的問(wèn)題:
如何讓線條跟隨光標(biāo)的移動(dòng)動(dòng)作,實(shí)現(xiàn)當(dāng)從導(dǎo)航的左側(cè) li 移向右側(cè) li,下劃線從左往右移動(dòng)。同理,當(dāng)從導(dǎo)航的右側(cè) li 移向左側(cè) li,下劃線從右往左移動(dòng)。
我們仔細(xì)看看,現(xiàn)在的效果:
當(dāng)從第一個(gè) li 切換到第二個(gè) li 的時(shí)候,第一個(gè) li 下劃線收回的方向不正確。所以,可以能我們需要將下劃線的初始位置位移一下,設(shè)置為 left: 100%,這樣每次下劃線收回的時(shí)候,第一個(gè) 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%; }
看看效果:
額,仔細(xì)對(duì)比兩張圖,第二種效果其實(shí)是撿了芝麻丟了西瓜。第一個(gè) li 的方向是正確了,但是第二個(gè) li 下劃線的移動(dòng)方向又錯(cuò)誤了。
所以,我們迫切需要一種方法,能夠不改變當(dāng)前 hover 的 li 的下劃線移動(dòng)方式卻能改變它下一個(gè) li 的下劃線的移動(dòng)方式(好繞口)。
沒(méi)錯(cuò)了,這里我們可以借助 ~ 選擇符,完成這個(gè)艱難的使命,也是這個(gè)例子中,最最重要的一環(huán)。
對(duì)于當(dāng)前 hover 的 li ,其對(duì)應(yīng)偽元素的下劃線的定位是 left: 100%,而對(duì)于 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; }
至此,我們想要的效果就實(shí)現(xiàn)拉!撒花??纯矗?/p>
效果不錯(cuò),就是有點(diǎn)僵硬,我們可以適當(dāng)改變緩動(dòng)函數(shù)以及加上一個(gè)動(dòng)畫延遲,就可以實(shí)現(xiàn)上述開頭里的那個(gè)效果了。當(dāng)然,這些都是錦上添花的點(diǎn)綴。(以上非原創(chuàng),轉(zhuǎn)自網(wǎng)絡(luò))
完整代碼實(shí)例如下:
<!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>
實(shí)際項(xiàng)目中若li里面有a標(biāo)簽出現(xiàn)不能點(diǎn)擊的情況,注意檢查偽類和li的層級(jí)關(guān)系,設(shè)置好各自z-index值。
以上就是如何使用純CSS制作特效導(dǎo)航條?的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章!
網(wǎng)站標(biāo)題:CSS制作特效導(dǎo)航條的方法
網(wǎng)站地址:http://muchs.cn/article40/gpjeeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、微信小程序、商城網(wǎng)站、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)