如何使用 CSS 设置可动画的底部边框的宽度？

16912023-09-25 00:10:44

在 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属性更改边框底部的宽度。

TAG标签：CSS动画