How to set the width of an animatable bottom border using CSS?-CSS Tutorial-php.cn

How to set the width of an animatable bottom border using CSS?

WBOY

Release： 2023-09-24 13:53:17

forward

1175 people have browsed it

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

In CSS, we can use the "border-bottom" CSS property to set the bottom border of an HTML element. We can animate the width of the bottom border using the animation property.

Additionally, we need to define keyframes to animate the bottom border by changing its width.

grammar

Users can follow the syntax below to animate the width of the bottom border.

selector {
   animation: mymove 5s infinite;
}
@keyframes mymove {
   50% {
      border-bottom: 25px solid black;
    }
}

Copy after login

In the above syntax, we created the "mymove" keyframe to set the width of the bottom border from 5 pixels to 25 pixels.

Example 1

In the example below, we create a div element containing the "test" class. Additionally, we applied some CSS to the div element to style it. We use the "animation" attribute to animate the div element based on the "mymove" keyframe for 5 seconds and unlimited times.

In the "mymove" keyframe we change the width of the bottom border to 0%, 30%, 60%, 85% and 100%. In the output, the user can observe the animation of the lower border width.

<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>

Copy after login

Example 2

In the example below, we create the

element and add some text content inside it. After that, we use CSS properties to style the element. We also use the "animation" property to animate the width of the bottom border.

In the "Border Animation" keyframe, we change the width of the border by keeping the other border properties the same.

<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>

Copy after login

Users learned to animate the width of the border bottom using CSS. We need to use the "animation" CSS property and define the keyframes of the animation. Within keyframes, we can change the width of the bottom of the border using the "bottom-border" or "bottom-border-width" CSS properties.

The above is the detailed content of How to set the width of an animatable bottom border using CSS?. For more information, please follow other related articles on the PHP Chinese website!