在 CSS 中，我們可以使用“border-bottom”CSS 屬性來設(shè)置 HTML 元素的下邊框。我們可以使用動(dòng)畫屬性來動(dòng)畫底部邊框的寬度。
此外，我們需要通過更改底部邊框的寬度來定義關(guān)鍵幀以對(duì)其進(jìn)行動(dòng)畫處理。
語法
用戶可以按照下面的語法來設(shè)置底部邊框?qū)挾鹊膭?dòng)畫。
selector {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
border-bottom: 25px solid black;
}
}在上面的語法中，我們創(chuàng)建了“mymove”關(guān)鍵幀，將底部邊框的寬度從 5 像素設(shè)置為 25 像素。
示例 1
在下面的示例中，我們創(chuàng)建了包含“test”類的 div 元素。此外，我們還對(duì) div 元素應(yīng)用了一些 CSS 來設(shè)置其樣式。我們使用“animation”屬性根據(jù)“mymove”關(guān)鍵幀對(duì) div 元素進(jìn)行動(dòng)畫處理，持續(xù) 5 秒和無限次。
在“mymove”關(guān)鍵幀中，我們將底部邊框的寬度更改為 0%、30%、60%、85% 和 100%。在輸出中，用戶可以觀察下邊框?qū)挾鹊膭?dòng)畫。
<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
在下面的示例中，我們創(chuàng)建了 <h2> 元素并在其中添加了一些文本內(nèi)容。之后，我們使用 CSS 屬性來設(shè)置元素的樣式。我們還使用“animation”屬性來設(shè)置底部邊框?qū)挾鹊膭?dòng)畫。
在“邊框動(dòng)畫”關(guān)鍵幀中，我們通過保持其他邊框?qū)傩韵嗤瑏砀倪吙虻膶挾取?/p>
<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>用戶學(xué)會(huì)了使用 CSS 為邊框底部的寬度設(shè)置動(dòng)畫。我們需要使用“animation”CSS 屬性并定義動(dòng)畫的關(guān)鍵幀。在關(guān)鍵幀中，我們可以使用“bottom-border”或“bottom-border-width”CSS屬性更改邊框底部的寬度。
