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

以上所述是小编给大家介绍的纯css实现元素下出现横线动画(background-image),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

纯css实现元素下出现横线动画 background-image