在 CSS 中，我們可以使用“border-bottom”CSS 屬性來設置 HTML 元素的下邊框。我們可以使用動畫屬性來動畫底部邊框的寬度。
此外，我們需要通過更改底部邊框的寬度來定義關鍵幀以對其進行動畫處理。
語法
用戶可以按照下面的語法來設置底部邊框寬度的動畫。
selector {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
border-bottom: 25px solid black;
}
}在上面的語法中，我們創建了“mymove”關鍵幀，將底部邊框的寬度從 5 像素設置為 25 像素。
示例 1
在下面的示例中，我們創建了包含“test”類的 div 元素。此外，我們還對 div 元素應用了一些 CSS 來設置其樣式。我們使用“animation”屬性根據“mymove”關鍵幀對 div 元素進行動畫處理，持續 5 秒和無限次。
在“mymove”關鍵幀中，我們將底部邊框的寬度更改為 0%、30%、60%、85% 和 100%。在輸出中，用戶可以觀察下邊框寬度的動畫。
<html>
<head>
<style>
.test {
width: 500px;
height: 200px;
background-color: red;
border: 2px solid green;
border-bottom: 5px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% { border-bottom: 5px solid black; }
30% { border-bottom: 15px solid black; }
60% { border-bottom: 25px solid black; }
85% { border-bottom: 15px solid black; }
100% { border-bottom: 5px solid black; }
}
</style>
</head>
<body>
<h2> Adding the <i> animation </i> to bottom border using CSS </h2>
<div class = "test"> </div>
</html>示例 2
在下面的示例中，我們創建了 <h2> 元素并在其中添加了一些文本內容。之后，我們使用 CSS 屬性來設置元素的樣式。我們還使用“animation”屬性來設置底部邊框寬度的動畫。
在“邊框動畫”關鍵幀中，我們通過保持其他邊框屬性相同來更改邊框的寬度。
<html>
<head>
<style>
.test {
width: fit-content;
border: 1px dotted blue;
border-bottom: 1px solid red;
animation: border-animation 1.5s infinite ease-in-out;
padding: 5px 10px;
color: green;
}
@keyframes border-animation {
0% { border-bottom: 1px solid red; }
30% { border-bottom: 3px solid red; }
50% { border-bottom: 5px solid red; }
70% { border-bottom: 3px solid red; }
100% { border-bottom: 1px solid red; }
}
</style>
</head>
<body>
<h2> Adding the <i> animation </i> to bottom border of checkbox using CSS</h2>
<h2 class = "test"> Welcome to the TutorialsPoint! </h2>
</html>用戶學會了使用 CSS 為邊框底部的寬度設置動畫。我們需要使用“animation”CSS 屬性并定義動畫的關鍵幀。在關鍵幀中，我們可以使用“bottom-border”或“bottom-border-width”CSS屬性更改邊框底部的寬度。
