CSS3 -Übergang - Fade -Out -Effekt

Das Cascading Style Sheet bietet viele Styling -Eigenschaften für die HTML -Elemente. Diese Eigenschaften beinhalten einfaches Styling zur Animation. Darüber hinaus gehören die Fade-In- und Fade-Out-Effekte zu den gemeinsamen. Das CSS “Übergang”Eigentum und“Animation”Mit den @Keyframe -Regeln helfen die Animation auf die HTML -Elemente.

Dieser Artikel veranschaulicht die Methode zum Hinzufügen von Fade -Out -Effekten auf verschiedene HTML -Elemente.

So fügen Sie dem Text einen Ausgangseffekt hinzu?

Der "AnimationEigenschaft kann verwendet werden, um dem Text einen Auswirkungen zu verleihen. Fügen Sie zuerst in der HTML -Datei ein "" -Element hinzu und weisen Sie es zuerst die “hinzu“Fadeout-Text" Ausweis:

Linuxint

Stil "#fadeout-text" id

Der "#Fadeout-Text"Wird verwendet, um auf die erstellte ID mit ID zugreifen zu können"Fadeout-Text”Und wenden Sie die folgenden Eigenschaften an:

#Fadeout-Text
Breite: 100%;
Farbe: dunkel;
Schriftgröße: 6EM;
Text-Align: Mitte;
Schriftfamilie: Fantasie;
Buchstaben-Abstand: .2em;
Animation: Fadeout 5S;

Hier:

• “Breite”Bestimmt die Breite des Divelements.
• “FarbeDefiniert den Text oder die Schriftfarbe des Elements.
• “SchriftgrößeGibt die Größe der Schrift an.
• “Textausrichtung”Bestimmt die Textausrichtung.
• “Schriftfamilie”Bestimmt den Schriftstil.
• “Buchstaben-Abstand”Legt den Abstand zwischen den Zeichen fest.
• “Animation”Eigenschaft legt den Animationsnamen fest“ausblenden"Und die Dauer"5s”Als fünf Sekunden.

Definieren Sie "@Keyframes" -Regel in der Animationseigenschaft

Um das Animationsverhalten auf das Element anzuwenden, erwähnen Sie die “Animation"Name nach dem"@keyframeSchlüsselwort wie folgt:

@keyframes fadeout
0%
Deckkraft: 1;

100%
Deckkraft: 0;

Im Folgenden finden Sie die Erläuterung des obigen Code -Snippets:

• “0%”Definiert den Beginn einer Animation.
• “100%”Definiert das Ende einer Animation.
• “OpazitätDie Eigenschaft wird verwendet, um die Transparenzniveau eines Elements anzupassen.

Ausgang

So fügen Sie einen Auswirkungen auf den Schweber hinzu?

In HTML ist es auch möglich, den Ausgangseffekt anzuwenden, wenn der Benutzer die Maus über das Element schwebt.

Beispiel

Das nachstehende Beispiel zeigt, wie ein Auswirkungen auf den Schwebewesen angewendet wird.

Stil "Fadeout-Text" -ID "Fadeout-Text"

Geben Sie zunächst das an “Opazität" als "100%Zusätzlich zu den anderen gestalteten Eigenschaften:

Deckkraft: 100%;

Fügen Sie ": Schwebe" -Pseudo-Selektor hinzu

#Fadeout-Text: Hover
Deckkraft: 10%;
Übergang: 3s;

Der "#Fadeout-Text: schweben Sie”Wird verwendet, um die angegebenen Eigenschaften auf das Element auf dem Schwebezustand anzuwenden. Hier das "ÜbergangEigenschaft ändert die Bewegung des Elements innerhalb der Dauer.

Ausgang

So fügen Sie den Bildern einen Ausgangseffekt hinzu?

Das Hinzufügen von Animationseffekten auf Bildern ist eine der unterhaltsamsten Funktionen der Webanwendung. Mit Hilfe des zuvor diskutierten Konzepts können Sie das Bild auch auf einer Webseite verblassen.

Beispiel

Füge hinzu ein "”Element und zuweisen Sie es die ID“Fadeout-Image”:

Stil „Fadeout-Image“ ID

Der "#Fadeout-Image”Wird verwendet, um auf die ID" Fadeout-Image "von HTML zuzugreifen und die folgenden Eigenschaften anzuwenden:

#Fadeout-Image
Breite: 100%;
Höhe: 50%;
Hintergrundbild: URL (/Bilder/Nacht-.JPG);
Hintergrundrepeat: No-Repeat;
Hintergrundgröße: Cover;
Position: absolut;
Animation: Fadeout 5S;

Im obigen Code:

• “Hintergrundbild”Definiert die URL des Bildes.
• “Hintergrund Wiederholung”Definiert das Bild nicht, das Bild nicht zu wiederholen.
• “HintergrundgrößeGibt die Hintergrundbildgröße an.
• “PositionEigentum als "absolut”Legt die Bildposition fest, die für den nächsten positionierten Vorfahren relevant ist.

Fügen Sie "@Keyframe" -Regeln zur Eigenschaft "Animation" hinzu

In ähnlicher Weise werden wir das verwenden "@keyframes”Regeln, um den Fade-Out-Effekt anzuwenden, um einen Animationseffekt zu erstellen:

@keyframes fadeout
0%
Deckkraft: 1;

100%
Deckkraft: 0;

Ausgang

Das ging darum, einen Auswirkungen auf HTML-Elemente mit CSS hinzuzufügen.

Abschluss

CSS -Eigenschaften wie "Opazität","Animation","Übergang", Und "@keyframe„Regeln sind von Bedeutung, um einen verblüffenden Effekt auf HTML-Elemente hinzuzufügen. Die „Depazität“ legt die Transparenzstufe fest, die Eigenschaft „Übergang“ passt die allmähliche Bewegung der Animation an, und die Eigenschaft „Animation“ zusammen mit der Regel „@keyframes“ hilft beim Hinzufügen von Animation zu den Elementen. Dieser Beitrag hat das Verfahren erläutert, wie ein Ausgangseffekt auf Elemente mit CSS hinzugefügt wird.