純css實現(xiàn)元素下出現(xiàn)橫線動畫（background-image）
發(fā)布時間：2018-12-06 09:33:15 作者：佚名 
我要評論
我要評論這篇文章主要介紹了純css實現(xiàn)元素下出現(xiàn)橫線動畫（background-image）的相關資料,需要的朋友可以參考下
效果圖：
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），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
這篇文章主要介紹了CSS mask-image屬性詳細介紹(小結(jié))的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-22
CSS解決uniapp使用image標簽圖片無法撐滿全屏問題(最新解決方法)
這篇文章主要介紹了CSS解決uniapp使用image標簽圖片無法撐滿全屏問題(最新解決方法),本片文章主要講解了如何解決，開發(fā)中遇到需要讓圖片撐滿全屏，但實際圖片會留空白的問2023-04-23
