純css實(shí)現(xiàn)元素下出現(xiàn)橫線動(dòng)畫(background-image)
發(fā)布時(shí)間:2018-12-06 09:33:15 作者:佚名
我要評(píng)論

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