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

zhibo系統開發發表於2023-11-08

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


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2993499/,如需轉載,請註明出處,否則將追究法律責任。

相關文章