CSS教程

关注公众号 jb51net

关闭
网页制作 > CSS > CSS教程 >

纯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),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!