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

Inhaltsverzeichnis

Grammatik

Beispiel 2

Heim

Web-Frontend

CSS-Tutorial

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

Sep 24, 2023 pm 01:53 PM

如何使用 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.

&lt;html&gt;
&lt;head&gt;
   &lt;style&gt;
      .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; }
      }
   &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt; Adding the &lt;i&gt; animation &lt;/i&gt; to bottom border using CSS &lt;/h2&gt;
   &lt;div class = "test"&gt; &lt;/div&gt;
&lt;/html&gt;

Nach dem Login kopieren

Beispiel 2

Im folgenden Beispiel haben wir das Element <h2> 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.

&lt;html&gt;
&lt;head&gt;    
    &lt;style&gt;
        .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; }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt; Adding the &lt;i&gt; animation &lt;/i&gt; to bottom border of checkbox using CSS&lt;/h2&gt;
    &lt;h2 class = "test"&gt; Welcome to the TutorialsPoint! &lt;/h2&gt;
&lt;/html&gt;

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn