CSS底部邊框動(dòng)畫效果是Web設(shè)計(jì)中常見(jiàn)的一種設(shè)計(jì)效果，可以在沒(méi)有使用JavaScript的情況下用CSS實(shí)現(xiàn)。這種效果可以為一個(gè)網(wǎng)頁(yè)或者一個(gè)特定的元素增添動(dòng)感。通過(guò)CSS的屬性，可以讓底部邊框從左邊開(kāi)始逐漸出現(xiàn)，以這種方式吸引用戶的目光。

.box {
border-bottom: 3px solid #42B983;  /* 設(shè)置邊框樣式以及顏色  */
position: relative;   /* 設(shè)置元素的相對(duì)定位  */
}
.box::after {  /* 使用偽元素，為元素添加動(dòng)畫效果  */
content: "";  /* 聲明偽元素 */
position: absolute; /* 將偽元素設(shè)置為絕對(duì)定位  */
bottom: 0;  /* 將偽元素放在元素的底部  */
left: 0;  /* 將偽元素放在元素的最左側(cè)  */
width: 100%;  /* 偽元素的寬度與元素保持一致  */
height: 3px;  /* 偽元素的高度  */
background-color: #42B983;  /* 設(shè)置偽元素的背景顏色  */
transform-origin: left top;  /* 設(shè)置變換的原點(diǎn)位置  */
transform: scaleX(0);  /* 將偽元素水平縮放至0  */
transition: transform 0.5s ease-in-out;  /* 設(shè)置變換的時(shí)長(zhǎng)、效果及時(shí)間函數(shù)  */
}
.box:hover::after {  /* 鼠標(biāo)移動(dòng)至元素上方時(shí)，出現(xiàn)動(dòng)畫效果  */
transform: scaleX(1);  /* 偽元素水平縮放至1  */
}

在上面的示例中，我們將一個(gè)元素的底部邊框設(shè)置為一個(gè)固定的寬度和顏色。接著，我們使用偽元素為元素添加了一個(gè)底部的“背景”，并使用CSS的transform屬性把它從左到右進(jìn)行縮放，從而實(shí)現(xiàn)了底部邊框出現(xiàn)的動(dòng)畫效果。

在這個(gè)例子中，我們使用了一個(gè)scaleX()函數(shù)，它可以使元素水平進(jìn)行縮放。將scaleX()設(shè)置為0時(shí)，元素會(huì)被縮小為0寬，隱藏的元素大小為0時(shí)，視覺(jué)上無(wú)法被觀察者看見(jiàn)。當(dāng)移動(dòng)到元素上時(shí)，我們將scaleX()縮放至1，這樣便可以產(chǎn)生逐漸透明的過(guò)程，以此吸引用戶的視線，并增加動(dòng)感。

最后只需要使用:hover偽類，觸發(fā)元素的動(dòng)畫效果。當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)，就可以看到底部邊框的動(dòng)畫效果。