极客笔记CSS 如何设置可动画的底部边框宽度
在CSS中，我们可以使用“border-bottom” CSS属性来为HTML元素设置底部边框。我们可以使用animation属性来对底部边框的宽度进行动画效果的设置。
另外，我们需要通过改变底部边框的宽度来定义关键帧，从而实现它的动画效果。
语法
用户可以按照以下语法方式来实现底部边框宽度的动画效果。
selector {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
border-bottom: 25px solid black;
}
}
在上面的语法中，我们创建了’mymove’关键帧，以将底部边框的宽度从5px动画到25px。
示例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’属性来对底部边框的宽度进行动画处理。
在’border-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来对 border-bottom 的宽度进行动画。我们需要使用CSS的‘animation’属性，并为动画定义关键帧。在关键帧中，我们可以使用‘bottom-border’或‘bottom-border-width’属性来改变 border bottom 的宽度。