app直播源代码，css给数字或文字在鼠标悬停时添加下划线动画

app直播源代码，css给数字或文字在鼠标悬停时添加下划线动画

html 代码：

 

1	<h1 class="row center " style="font-size: 2em;">css给数字或文字在鼠标悬停时添加下划线动画</h1><br><div class="row center text"><span>春有百花秋望月</span>，<span>夏有冷风冬听雪</span>。</div><br><div class="row center text"><span>心中若无烦心事</span>，<span>便是人生好时节</span>。</div>

 

css代码：

 

 

1

<style scoped><br>.text {<br>margin: 16px;<br>font-weight: 600;<br>letter-spacing: 2px;<br>font-family: '楷体';<br> <br>.span_style {<br>font-size: 18px;<br>cursor: pointer;<br>margin-right: 4px;<br>background: linear-gradient(to right, #55aaff, #aa55ff, #ffaa00) no-repeat right bottom;<br>/*即下划线（背景图）在默认情况下宽度为0 */<br>background-size: 0 2px;<br>/* 设定过度时间 */<br>transition: background-size 1000ms;<br> <br>}<br> <br>span:hover {<br>/* 悬停 下划线的横向滑动位置为左 */<br>background-position-x: left;<br>/* 设定下划线宽度为100%展示 */<br>background-size: 100% 2px;<br>}<br>}<br></style>

 

 以上就是app直播源代码，css给数字或文字在鼠标悬停时添加下划线动画， 更多内容欢迎关注之后的文章