純CSS實現(xiàn)了下劃線的交互動畫效果

發(fā)布時間：2023-03-06 16:46:24 作者：東方睡衣

我要評論

本文主要介紹了純CSS實現(xiàn)了下劃線的交互動畫效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

背景

最近看到了一個特別炫酷的網(wǎng)站上的一個小細節(jié)，下劃線的動畫?？聪滤膶崿F(xiàn)效果。

但是，假如我們左邊并沒有足夠的空間存放一條不可見的下劃線呢？像這樣。

思路與實現(xiàn)

我要把這個下劃線也做成文章剛開始的動畫。就不是太好借鑒上面的思路。那我的新思路就是給鼠標移入（hover）操作整兩個動畫，但一個元素又不能添加兩個animation，如果要更換類選擇器，又要動用到JS代碼，太麻煩了。

于是我就想到了CSS中的::before和::after選擇器呀。讓before的線初始寬度為0，鼠標移入就變成100%；讓after的線初始寬度為100%，鼠標移入就變成0，這樣不就得了。

前提你要記住。

1.使用width:100%的前提是讓其本身或父元素有實際的寬度，我用了width:fit-content。
2.使用position: absolute的前提是讓其父元素有非static的position。

before的實現(xiàn)

.underline::before{content: "";display: block;position: absolute;height: 1px;background: #000;width: 0;//初始寬度為0left: 0;bottom: 0;transition: width 1s;
}
.underline:hover::before {width: 100%;//鼠標移入就變成100%
}

單獨使用上面這段代碼可以實現(xiàn)的效果是

after的實現(xiàn)

.underline::after{content: "";display: block;height: 1px;background: #000;width: 100%;position: absolute;right: 0;bottom: 0;transition: width 1s;
}
.underline:hover::after{width: 0;
}

單獨使用上面這段代碼可以實現(xiàn)的效果是

before和after同時使用

把上面兩段代碼放一起，就是我們想要的效果了吧。是不是有人蠢蠢欲動啦。但是?。?！

動手快的小伙伴會發(fā)現(xiàn)，誒？我兩段代碼放一起，怎么效果都沒了？？？

你猜猜，為什么？

好，當然是因為當你把這兩個動作同時實現(xiàn)的時候，效果抵消了呀。before往右走的同時after也在往右走，中間根本沒有間隙，哪怕他有動畫效果，你也是看不見的呀。

所以?。?！加個延遲效果咯。

transition-delay：表明動畫效果屬性生效之前需要等待的時間。

最終效果的實現(xiàn)

想想，該讓它怎么加這個延遲，才能實現(xiàn)文章剛開始的效果呢？

1.before的動畫需要在鼠標剛移入時有延遲，但是鼠標移出時立即執(zhí)行；
2.after的動畫需要在鼠標剛移入時立即執(zhí)行，鼠標移出時有對應的延遲時間。

只有這樣，才能有肉眼可見的閃爍效果。在上面的代碼中分別加上如下字段就可以啦～～～

.underline::before{transition-delay: 0s;
}
.underline:hover::before {transition-delay: 1s;
}
.underline::after{transition-delay: 1s;
}
.underline:hover::after{transition-delay: 0s;
}

看！這樣就做完咯！