成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

tab 切換下劃線跟隨實(shí)現(xiàn)

CODING / 919人閱讀

摘要：代碼大致如下點(diǎn)擊跟隨結(jié)合使用類即可實(shí)現(xiàn)點(diǎn)擊跟隨使用參考資料不可思議的光標(biāo)下劃線跟隨效果不可思議的純導(dǎo)航欄下劃線跟隨效果切換下劃線跟隨實(shí)現(xiàn)

HTML 結(jié)構(gòu)如下：

    
  
  • 不可思議的CSS
    • 
  
  • 導(dǎo)航欄
    • 
  
  • 光標(biāo)小下劃線跟隨
    • 
  
  • PURE CSS
    • 
  
  • Nav Underline
    •

導(dǎo)航欄目的 li 的寬度是不固定的

當(dāng)從導(dǎo)航的左側(cè) li 移向右側(cè) li，下劃線從左往右移動(dòng)。同理，當(dāng)從導(dǎo)航的右側(cè) li 移向左側(cè) li，下劃線從右往左移動(dòng)。

設(shè)計(jì)思路 :

利用絕對(duì)定位，將 li 的偽元素的寬度設(shè)置為 0

在 hover 的時(shí)候，寬度從 width: 0 -> width: 100%

左移左出，右移右出 :

將下劃線的 left 偏移量初始位置設(shè)置為 left: 100%

當(dāng)鼠標(biāo) hover 的時(shí)候， left 偏移量設(shè)置為 0

使用 ~ 選擇符，改變當(dāng)前選擇元素 之后 所有元素的行為 :
在不改變當(dāng)前 hover 的 li 的下劃線移動(dòng)方式，而改變它下一個(gè) li 的下劃線的移動(dòng)方式，
對(duì)于當(dāng)前 hover 的 li ，其對(duì)應(yīng)偽元素的下劃線的定位是 left: 100%，而對(duì)于 li:hover ~li::before，它們的定位是 left: 0。

神奇的 ~ 選擇符

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

沒錯(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;
}
點(diǎn)擊 tab 跟隨

結(jié)合 js 使用 active 類即可實(shí)現(xiàn) 點(diǎn)擊 tab 跟隨

.active ~ li::before {
  left: 0;
}
.active::before {
  width: 100%;
  left: 0;
  top: 0;
}

// 使用 jquery

$("li").on("click", function () {
  $(this).addClass("active").siblings().removeClass("active")
})
參考資料

不可思議的CSS光標(biāo)下劃線跟隨效果
GitHub - chokcoco/iCSS
不可思議的純CSS導(dǎo)航欄下劃線跟隨效果
tab 切換下劃線跟隨實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116956.html

相關(guān)文章

  • tab 切換下劃線跟隨實(shí)現(xiàn)

    摘要：代碼大致如下點(diǎn)擊跟隨結(jié)合使用類即可實(shí)現(xiàn)點(diǎn)擊跟隨使用參考資料不可思議的光標(biāo)下劃線跟隨效果不可思議的純導(dǎo)航欄下劃線跟隨效果切換下劃線跟隨實(shí)現(xiàn) showImg(https://segmentfault.com/img/bVbg4wM?w=699&h=91); HTML 結(jié)構(gòu)如下： 不可思議的CSS 導(dǎo)航欄 光標(biāo)小下劃線跟隨 PURE CSS Nav Underline ...

    googollee 評(píng)論0 收藏0

  • tab 切換下劃線跟隨實(shí)現(xiàn)

    摘要：代碼大致如下點(diǎn)擊跟隨結(jié)合使用類即可實(shí)現(xiàn)點(diǎn)擊跟隨使用參考資料不可思議的光標(biāo)下劃線跟隨效果不可思議的純導(dǎo)航欄下劃線跟隨效果切換下劃線跟隨實(shí)現(xiàn) showImg(https://segmentfault.com/img/bVbg4wM?w=699&h=91); HTML 結(jié)構(gòu)如下： 不可思議的CSS 導(dǎo)航欄 光標(biāo)小下劃線跟隨 PURE CSS Nav Underline ...

    antz 評(píng)論0 收藏0

  • TabLayout的簡(jiǎn)單運(yùn)用和若干問題的解決

    摘要：初步實(shí)現(xiàn)之前在知乎上看到有人對(duì)微信的設(shè)計(jì)改動(dòng)將使用頻率高的朋友圈消息提醒和公眾號(hào)這三個(gè)功能獨(dú)立出來放在首頁。 1、介紹和準(zhǔn)備 我們?cè)谑褂檬謾C(jī)App時(shí)不難會(huì)看到這樣的頁面上面是一組起導(dǎo)航作用的標(biāo)簽，點(diǎn)擊標(biāo)簽就會(huì)切換到相應(yīng)的頁面；在不同的頁面中滑動(dòng)時(shí)，標(biāo)簽的樣式（文字大小或者顏色）也會(huì)發(fā)生變化。這樣你任何時(shí)候都能一眼看出自己停留在哪個(gè)頁面。這個(gè)布局出鏡率實(shí)在太高了，我甚至敢說每個(gè)學(xué)Andr...

    PiscesYE 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<