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

编辑: admin 分类: css 发布时间: 2022-03-14 来源:互联网

效果图:

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:hove【来源:http://www.nextecloud.cn/hk.html 转载请保留连接】r{
  background-size : 100% 2px;
}

总结

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