Verwenden Sie CSS für einen Fade-In-Effekt auf die Seitenlast

CSS ermöglicht es uns, die HTML-Elemente verschiedene Styling-Eigenschaften wie Farbe, Rand, Schriftgröße und Textausrichtung hinzuzufügen. Diese Stylingeigenschaften bieten ein attraktives Aussehen für die Anwendung. Darüber hinaus gibt es mehrere andere CSS -Eigenschaften, die uns helfen, den Elementen einige Animationseffekte hinzuzufügen. Die Verwendung von Animationen kann auch das Engagement der Benutzer auf Webseiten erhöhen.

In diesem Artikel wird:

• Methode 1: Fade-In-Effekt mithilfe der CSS-Animationseigenschaft
• Methode 2: Fade-in-Effekt unter Verwendung der CSS-Übergangseigenschaft

Methode 1: Fade-In-Effekt mithilfe von CSS-Animationseigenschaften

Um eine einfache HTML -Seite zu entwerfen, fügen Sie das folgende Element hinzu:

• Ergänzen Sie die "

  ”Element zusammen mit dem“Stil”Attribut. Das Attribut „Stil“ enthält die Stylingeigenschaften des Elements.

• Wende an "FarbeEigenschaft im Stilattribut, um die Textfarbe des Elements zu definieren.
• Danach benutzen Sie die “

  Element zum Hinzufügen eines Textes oder eines einfachen Absatzes.

Unten finden Sie den HTML -Code:

LinuxHint -Tutorial -Website

Auswirkungen auf die Seitenlast

Die HTML -Seite wird erfolgreich erstellt:

Im Abschnitt CSS, um den Fade-In-Effekt auf der Seite anzuwenden, die “Animation"CSS -Eigenschaft wird auf der" verwendet "Element der HTML -Seite.

Stil „Körper“ Element

Körper
Animation: Fadeinpage Easy 3s;
Animationsveranstalter-Zählung: 1;

Das "" wird mit den folgenden CSS -Eigenschaften angewendet:

• “AnimationIst die Kurzeigeneigenschaft, die die Animation durch Angabe mehrerer Werte festlegt. Hier ist der Animationsname, die Animations-Timing-Funktion und die Animationsdauer definiert.
• “Animationsveranstalter”Definiert, wie oft die Animation iterieren sollte.

Wenden Sie "@keyframes" -Regeln auf "Animation" an

@keyframes fadeinpage
0%
Deckkraft: 0;

100%
Deckkraft: 1;

Das definieren "@keyframesRegeln für die Animation, erwähnen Sie den Animationsnamen nach dem Keyword @KeyFrames. Ändern Sie das Animationsverhalten wie folgt:

• Bei "0%"Animation, die"OpazitätEigenschaft wird der Wert 0 zugewiesen. Es bedeutet, wenn die Animation beginnt, ist das Bild transparent.
• Bei "100%"Animation, die Deckkraft ist auf"1”, Was sich auf eine feste Farbe bezieht.

Ausgang

Lassen Sie uns die zweite Methode zur Anwendung des Fade-In-Effekts auf die Seitenlast auf die Seite bringen.

Methode 2: Fade-in-Effekt unter Verwendung der CSS-Übergangseigenschaft

Fügen Sie ein "Onload”Attribut innerhalb der“" Element. Dieses Ereignis wird auf der Seitenlade ausgelöst. Bei der Last wird die Deckkraft des Körperselements auf “gesetzt“1”, Der sich auf eine feste Farbe bezieht:

In diesem Beispiel das CSS “ÜbergangImmobilien werden verwendet, um einen Fade-In-Effekt hinzuzufügen:

Körper
Deckkraft: 0;
Übergang: Deckkraft 6s;

Im Folgenden finden Sie die Erklärung der oben genannten Eigenschaften:

• “OpazitätEigenschaft definiert die Transparenz der Elemente.
• Verwenden von CSS “Übergang”, Ändern Sie allmählich die Werte von Eigenschaften über eine bestimmte Zeit.

Ausgang

Wir haben Ihnen die Methoden für die Verwendung von CSS für einen Auswirkungen auf die Seitenlast beigebracht.

Abschluss

Mehrere CSS-Eigenschaften können verwendet werden, um eine Verblüffung auf HTML-Elemente anzuwenden. Genauer gesagt das “Animation","Opazität", Und "ÜbergangEigenschaften können verwendet werden, um animierte Effekte auf Seiten oder Elemente anzugeben. Die Animationen werden durch die Verwendung der “angepasst@keyframe" Regeln. In diesem Artikel wurden die Methoden erläutert, um einen Fade-In-Effekt auf die Seitenlast mit CSS hinzuzufügen.