So haben Sie mehrere CSS -Übergänge in einem Element

Viele Online-Plattformen erfordern Animationen auf einigen Webseiten, damit die App auffälliger aussieht. Zu diesem Zweck verwenden die Entwickler CSS-Eigenschaften, während sie die Front-End-Schnittstellen entwerfen. Insbesondere bedeutet CSS -Übergänge, Animationen auf ein HTML -Element über die CSS -Eigenschaften so anzuwenden, dass es die Eigenschaften nacheinander automatisch anwendet.

In diesem Artikel werden die Methode zur Anwendung von CSS -Eigenschaften so erläutert, dass sie mehrere Übergänge zu einem HTML -Element haben.

So wenden Sie mehrere CSS -Übergänge auf ein Element an?

Alles, was es benötigt, ist zuerst die Elemente in HTML zu erstellen, auf die die Übergänge angewendet werden müssen, und dann die CSS -ID oder die Klassenauswahl im Stilelement hinzuzufügen, um auf die HTML -Elemente zu verweisen.

Beispiel

Erstellen wir ein Div -Container -Element im HTML -Code -Körper und wenden Sie dann die CSS -Eigenschaften darauf an, damit es animiert aussieht:

Schweben Sie um die Übergänge zu sehen

Hallo Benutzer!!!

Im obigen Code -Snippet:

• • Ein "

    "Überschrift wird mit dem Inline -CSS hinzugefügt"Rand”Eigenschaft auf“1 Rem"Und die Überschrift sagt"Schweben Sie um die Übergänge zu sehen”.

  • Danach ein ""Containerelement wird mit der Klasse hinzugefügt, die als" als "deklariert" hinzugefügt wirdmeine Klasse”.
  • Der ""Containerelement hat den Text"Hallo Benutzer!!!" im Inneren. Die CSS -Übergänge werden auf dieses DIV -Element angewendet.

Das CSS -Stilelement sollte alle notwendigen Eigenschaften haben, die das DIV animiert lassen:

.meine Klasse
Schriftgröße: 3Rem;
Rand: 2Rem;
Justify-Content: Center;
Anzeige: Flex;
Grenze: 10px festes Lila;
Breite: 20rem;
Höhe: 9REM;
Übergang: Farbe 1S-Entlastung, Padding-Top 1s Easy-Out-Out,
Padding-Bottom 1s Easy-Out, Schriftgröße 3S-Leichterung;

.Myclass: Hover
Farbe blau;
Grenze: 10px fest orange;
Padding-Top: 100px;
Padding-Bottom: 40px;
Schriftgröße: 1.8rem;

Im obigen CSS -Stilelement:

• • Es wird ein Klassenauswahl hinzugefügt, der sich auf die “bezieht“meine Klasse”DIV -Containerelement. Im Inneren sind verschiedene CSS -Eigenschaften für das Div -Containerelement definiert.
  • Der "Schriftgröße”Eigenschaften legt die Größe des im Div -Container geschriebenen Textes auf“ fest “3rem”.
  • Der "Rand"Eigenschaft wird hinzugefügt, um den Abstand von" zu geben "2rem”Nach dem Text oder der Überschrift.
  • Der "RechtfertigungsbekämpfungDie Eigenschaft richtet den Text des Div -Behälters an der Mitte des Div -Behälters aus.
  • Der "Display-FlexDie Eigenschaft wurde hinzugefügt, um den Inhalt im DIV -Element automatisch ordnungsgemäß auszurichten.
  • Der "Grenze„Eigenschaft wird hinzugefügt, um das Grenzgewicht des Div -Containers als“ festzulegen “10px"Und es definiert die Farbe des Randes als" als "lila”.
  • Der "BreiteEigenschaft definiert die vertikale Länge des Div -Elements als "20rem”.
  • In ähnlicher Weise die “HöheEigenschaft definiert die horizontale Länge des Div -Elements als "9rem”.
  • Der "ÜbergangDie Eigenschaft wird hinzugefügt, um die Zeit zu definieren, zu der die Übergänge angewendet werden müssen. Für "Farbe","Polsterung" Und "Padding-Bottom", Es wurde als" festgelegt "1 Sekunde" und für "Schriftgröße", Es wurde als" festgelegt "3 Sekunden”.
  • Danach die Pseudoklasse “:schweben"Wird mit dem CSS -Klasse -Selektor hinzugefügt".meine Klasse„Um die CSS -Eigenschaften zu definieren, die implementiert werden sollen, während der Benutzer über das durch durch erstellte Element schwebt“meine Klasse”.
  • Der "Farbe"Eigenschaft ist definiert als"Blau”Also, wenn der Benutzer über das Element schwebt, ändert er die Textfarbe sofort in Blau.
  • Als nächstes das "Grenze"Eigentum wurde definiert, die die Grenzgröße auf" verändert "10px"Während des Schwebens und der Farbe für die Grenzen wurde definiert als"orange”.
  • Der "Polsterung" Und "Padding-BottomEs wurden Eigenschaften hinzugefügt, um den Abstand zwischen dem Inhalt und den Grenzen von oben bzw. unten zu definieren.
  • Der "Schriftgröße" ist definiert als "8rem”Während des Schwebes.

Die Ergebnisse der oben genannten CSS -Übergänge sind Folgendes:

Dies fasst die Methode zusammen, um mehrere CSS -Übergänge auf ein HTML -Element anzuwenden.

Abschluss

CSS -Übergänge werden auf die HTML -Elemente angewendet, damit sie animiert aussehen werden. Alles, was für die Anwendung von CSS -Übergängen erforderlich ist, ist das Hinzufügen der ID oder des Klassenauswahl im CSS -Stil, das sich auf das HTML -Element bezieht, auf das die Übergänge angewendet werden müssen, und dann alle erforderlichen Eigenschaften wie Farbe, Schriftart, Grenzen, Polsterung hinzuzufügen vor und nach dem Übergang. Dieser Artikel leitete die Anwendung mehrerer CSS -Übergänge auf ein HTML -Element.