效果圖：
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;}總結
以上所述是小編給大家介紹的純css實現元素下出現橫線動畫（background-image），希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
