CSS底部邊框動畫效果是Web設計中常見的一種設計效果，可以在沒有使用JavaScript的情況下用CSS實現。這種效果可以為一個網頁或者一個特定的元素增添動感。通過CSS的屬性，可以讓底部邊框從左邊開始逐漸出現，以這種方式吸引用戶的目光。

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

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

在這個例子中，我們使用了一個scaleX()函數，它可以使元素水平進行縮放。將scaleX()設置為0時，元素會被縮小為0寬，隱藏的元素大小為0時，視覺上無法被觀察者看見。當移動到元素上時，我們將scaleX()縮放至1，這樣便可以產生逐漸透明的過程，以此吸引用戶的視線，并增加動感。

最后只需要使用:hover偽類，觸發元素的動畫效果。當鼠標移動到元素上時，就可以看到底部邊框的動畫效果。