CSS是網(wǎng)頁開發(fā)中非常重要的一個(gè)技能，它可以作為一種樣式語言來控制網(wǎng)頁的外觀和布局。如果我們要給網(wǎng)頁添加一些動畫效果，CSS也可以幫助我們實(shí)現(xiàn)。本文將介紹如何使用CSS實(shí)現(xiàn)下劃線動畫效果。

下劃線在網(wǎng)頁設(shè)計(jì)中經(jīng)常被使用，不僅可以起到強(qiáng)調(diào)內(nèi)容的作用，還可以增加頁面的美感。下劃線動畫效果可以讓頁面更具有動感，吸引用戶的目光。

/* HTML代碼 */
<h1>歡迎來到我的個(gè)人網(wǎng)站</h1>
/* CSS代碼 */
h1 {
position: relative;
display: inline-block;
}
h1::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background-color: #000;
transition: width 0.2s;
}
h1:hover::after {
width: 100%;
}

在上面的代碼中，我們通過偽元素`::after`在標(biāo)題下面創(chuàng)建了一個(gè)空的元素。這個(gè)元素的高度被設(shè)置成了2px，用于模擬下劃線的樣式。為了使下劃線動起來，我們使用CSS過渡效果（transition）來實(shí)現(xiàn)它的寬度從0到100%的平滑過渡。在標(biāo)題被鼠標(biāo)懸停時(shí)，下劃線會自動擴(kuò)展到整個(gè)標(biāo)題的寬度。

我們可以根據(jù)需要來修改下劃線的顏色、厚度和持續(xù)時(shí)間等屬性，以實(shí)現(xiàn)更加豐富的下劃線動畫效果。同時(shí)，我們還可以在其他元素中使用上述代碼實(shí)現(xiàn)類似的下劃線效果。