純css實現(xiàn)元素下出現(xiàn)橫線動畫(background-image)
發(fā)布時間:2018-12-06 09:33:15 作者:佚名
我要評論
這篇文章主要介紹了純css實現(xiàn)元素下出現(xiàn)橫線動畫(background-image)的相關(guān)資料,需要的朋友可以參考下
效果圖:

html:
<div class='site_bar'>首頁</div>
css:
.site_bar{
background-image : linear-gradient(red,red);
background-position : center bottom;
background-size : 0 2px;
background-repeat : no-repeat; //這個屬性不能少。
transition : .3s;
}
.site_bar:hover{
background-size : 100% 2px;
}
總結(jié)
以上所述是小編給大家介紹的純css實現(xiàn)元素下出現(xiàn)橫線動畫(background-image),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
這篇文章主要介紹了CSS mask-image屬性詳細介紹(小結(jié))的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-22
CSS解決uniapp使用image標(biāo)簽圖片無法撐滿全屏問題(最新解決方法)
這篇文章主要介紹了CSS解決uniapp使用image標(biāo)簽圖片無法撐滿全屏問題(最新解決方法),本片文章主要講解了如何解決,開發(fā)中遇到需要讓圖片撐滿全屏,但實際圖片會留空白的問2023-04-23



