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

百变鹏仔 3个月前 (09-19) #CSS

文章标签边框

在 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

在下面的示例中，我们创建了

元素并在其中添加了一些文本内容。之后，我们使用 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属性更改边框底部的宽度。

文章推荐

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

语法

示例 1

示例 2

元素并在其中添加了一些文本内容。之后，我们使用 CSS 属性来设置元素的样式。我们还使用“animation”属性来设置底部边框宽度的动画。

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写