app直播原始碼，css給數字或文字在滑鼠懸停時新增下劃線動畫

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給數字或文字在滑鼠懸停時新增下劃線動畫， 更多內容歡迎關注之後的文章