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

效果图：

ht ML ：
&nbs p;

<div class='s IT e_bar'>首页</div>
css:
.site_bar{
　　background -i mage : linear-gra die nt( red ,red);
　　background-position :  center  bottom;
　　 background-size  : 0 2px;
　　background-re PE at : no-repeat;  //这个属性不能少。
　　transition : .3s;
}
.site_bar:hover{
　　background -s ize : 100% 2px;
}

总结

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

总结

以上是 为你收集整理的 纯css实现元素下出现横线动画（background-image） 全部内容，希望文章能够帮你解决 纯css实现元素下出现横线动画（background-image） 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于纯css实现元素下出现横线动画（background-image）的详细内容...