css实现元素下出现横线动画
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; }
效果图: