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

cssweb developmentfront end technology更新于 2024/7/5 5:32:17

在 CSS 中，我们可以使用 CSS 属性"border-bottom"来设置 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 为底部边框的宽度设置动画。我们需要使用 CSS 属性"animation"并为动画定义关键帧。在关键帧中，我们可以使用 CSS 属性"bottom-border"或"bottom-border-width"来更改底部边框的宽度。