“ÜbergangIst eine CSS. Der Übergang kann auf dem CSS implementiert werden “Anzeige" Eigentum. Die Anzeigeeigenschaft wird verwendet, um das Layout eines Elements zu steuern, einschließlich Flusslayout, Gitter, Flex und vieler mehr.

In diesem Beitrag wird untersucht, wie Übergänge mithilfe der CSS -Anzeigeeigenschaft angewendet werden können.

So wenden Sie Übergänge auf der CSS -Anzeige -Eigenschaft an?

Benutzer können Übergänge nicht direkt auf das CSS anwendenAnzeige" Eigentum. Es gibt jedoch eine alternative Möglichkeit, Übergänge auf der Anzeigeeigenschaft anzuwenden. Zu diesem Zweck durchlaufen Sie das unten erwähnte Verfahren.

Schritt 1: Machen Sie einen Behälter ""

Erstellen Sie zunächst einen Div -Container mit dem “Tag mit der zugewiesenen Klasse mit einem bestimmten Wert.

Schritt 2: Fügen Sie eine Überschrift hinzu

Nächst

" Zu "

" Stichworte. Zum Beispiel, "

”Fügt eine Überschrift hinzu.

Schritt 3: Fügen Sie Daten zur Liste hinzu

Um die Daten in Form einer Liste einzufügen, verwenden Sie die “

" Schild:

Liste der Haustiertiere

Henne

Ente

Hund

Katze

Kaninchen

Die Ausgabe des oben genannten Codes lautet wie folgt:

Gehen Sie nun den CSS -Abschnitt zum Styling der Liste voran.

Schritt 4: Stil “.Haustier-Animal-Element

Greife auf ... zu ""Element mit Hilfe der zugewiesenen Klasse".Haustier Tier”Und wenden Sie die aufgelisteten Eigenschaften an:

.Haustier Tier
Grenze: 2PX gepunktete RGB (230, 15, 15);
Rand: 50px;
Hintergrundfarbe: RGB (252, 239, 169);

Hier:

• “GrenzeDie Eigenschaft wird verwendet, um die Grenze um das Element anzugeben.
• “Rand”Definiert den Raum um die Elementgrenze.
• “Hintergrundfarbe”Verteilt eine Farbe an der Rückseite des Elements.

Das resultierende Bild zeigt die Ausgabe des obigen Codes:

Schritt 5: Style List "li" hinzugefügt

Greifen Sie nun auf die Liste der “zu"div"Container mit Klasse"Haustier Tier"Verwenden".Haustier-Tier> Li”Und wenden Sie die unten erwähnten Eigenschaften an:

.Haustier-Animal> li
Sichtbarkeit: versteckt;
Deckkraft: 0.2;
Übergang: Sichtbarkeit 0s, Deckkraft 0.5s linear;

Hier:

• Der "SichtweiteCSS wird verwendet, um die Sichtbarkeit des Elements festzulegen, ohne das Layout eines Dokuments wie versteckt oder sichtbar zu ändern.
• “OpazitätGibt die Transparenz eines Elements an.
• “ÜbergangMit ”können Benutzer die Eigenschaftswerte über eine bestimmte Dauer reibungslos ändern:

Schritt 6: Wenden Sie die Pseudoklasse „Hover“ an

Wenden Sie nun das an “anschwebenEigenschaft auf der Liste:

.PET-Animal: Hover> li
Sichtbarkeit: sichtbar;
Deckkraft: 1;

Der ":schwebenCSS ist eine Pseudoklasse, die Änderungen in der Laufzeit vornimmt, wenn der Mauszeiger über das Element bewegt wird. Machen Sie eine Liste mit der “sichtbarSichtweite"Und setzen Sie die Transparenz mit der"Opazität”CSS -Eigenschaften zur Liste auf dem Hover:

Es kann beobachtet werden, dass wir den Übergang auf die “erfolgreich angewendet haben“Anzeige" Eigentum.

Abschluss

Der CSS -Übergang kann nicht direkt auf die “angewendet werdenAnzeige" Eigentum. Es kann jedoch alternativ angewendet werden. Fügen Sie dazu das Listen -Tag im HTML -Dokument hinzu, greifen Sie auf die Liste mit dem Tag -Namen zu und wenden Sie anÜbergang","Opazität", Und "Sichtweite”CSS -Eigenschaften auf der Liste. Dann verwenden Sie die “: schwebenPseudoklasse und den Sichtbarkeitswert als "festlegen"sichtbar”. In diesem Beitrag wurde erklärt, wie der Übergang auf die CSS -Anzeigeeigenschaft angewendet wird.