Wie lege ich die Breite eines animierbaren unteren Randes mithilfe von CSS fest?-CSS-Tutorial-php.cn

Wie lege ich die Breite eines animierbaren unteren Randes mithilfe von CSS fest?

WBOY

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

nach vorne

1148 Leute haben es durchsucht

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

In CSS können wir die CSS-Eigenschaft „border-bottom“ verwenden, um den unteren Rand von HTML-Elementen festzulegen. Mit der Animationseigenschaft können wir die Breite des unteren Randes animieren.

Zusätzlich müssen wir Keyframes definieren, um den unteren Rand durch Ändern seiner Breite zu animieren.

Grammatik

Benutzer können der folgenden Syntax folgen, um die Breite des unteren Randes zu animieren.

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

Nach dem Login kopieren

In der obigen Syntax haben wir den Keyframe „mymove“ erstellt, um die Breite des unteren Rands von 5 Pixel auf 25 Pixel festzulegen.

Beispiel 1

Im folgenden Beispiel haben wir ein div-Element erstellt, das die Klasse „test“ enthält. Darüber hinaus haben wir etwas CSS auf das div-Element angewendet, um es zu formatieren. Wir verwenden das Attribut „animation“, um das div-Element basierend auf dem „mymove“-Keyframe für 5 Sekunden und unbegrenzte Zeiträume zu animieren.

Im „mymove“-Keyframe ändern wir die Breite des unteren Randes auf 0 %, 30 %, 60 %, 85 % und 100 %. In der Ausgabe kann der Benutzer die Animation der unteren Randbreite beobachten.

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

Nach dem Login kopieren

Beispiel 2

Im folgenden Beispiel haben wir das Element

erstellt und darin Textinhalte hinzugefügt. Danach verwenden wir CSS-Eigenschaften, um das Element zu formatieren. Wir verwenden auch die Eigenschaft „animation“, um die Breite des unteren Randes zu animieren.

Im Keyframe „Rahmenanimation“ ändern wir die Breite des Rahmens, indem wir die anderen Rahmeneigenschaften beibehalten.

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

Nach dem Login kopieren

Der Benutzer hat gelernt, die Breite des unteren Randes mithilfe von CSS zu animieren. Wir müssen die CSS-Eigenschaft „animation“ verwenden und die Keyframes der Animation definieren. Innerhalb von Keyframes können wir die Breite des unteren Randes mithilfe der CSS-Eigenschaften „bottom-border“ oder „bottom-border-width“ ändern.

Das obige ist der detaillierte Inhalt vonWie lege ich die Breite eines animierbaren unteren Randes mithilfe von CSS fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!