app直播源代码，css给数字或文字在鼠标悬停时添加下划线动画
html 代码：
<h1 class="row center " style="font-size: 2em;">css给数字或文字在鼠标悬停时添加下划线动画</h1>
<div class="row center text"><span>春有百花秋望月</span>，<span>夏有冷风冬听雪</span>。</div>
<div class="row center text"><span>心中若无烦心事</span>，<span>便是人生好时节</span>。</div>
css代码：
<style scoped>
.text {
margin: 16px;
font-weight: 600;
letter-spacing: 2px;
font-family: '楷体';
.span_style {
font-size: 18px;
cursor: pointer;
margin-right: 4px;
background: linear-gradient(to right, #55aaff, #aa55ff, #ffaa00) no-repeat right bottom;
/*即下划线（背景图）在默认情况下宽度为0 */
background-size: 0 2px;
/* 设定过度时间 */
transition: background-size 1000ms;
}
span:hover {
/* 悬停 下划线的横向滑动位置为左 */
background-position-x: left;
/* 设定下划线宽度为100%展示 */
background-size: 100% 2px;
}
}
</style>
以上就是app直播源代码，css给数字或文字在鼠标悬停时添加下划线动画， 更多内容欢迎关注之后的文章
标签：动画,下划线,app,鼠标悬停,background,源代码,css From： https://www.cnblogs.com/yunbaomengnan/p/17817272.html