Dieser Artikel enthält:
- Methode 1: Einblendeffekt mit CSS-Animationseigenschaft
- Methode 2: Einblendeffekt mit CSS-Übergangseigenschaft
Methode 1: Einblendeffekt mit der CSS-Eigenschaft „Animation“.
Um eine einfache HTML-Seite zu entwerfen, fügen Sie ihr das folgende Element hinzu:
- Ergänzen Sie die ' ”-Element zusammen mit dem “ Stil ” Attribut. Das Attribut „style“ enthält die Styling-Eigenschaften des Elements.
- Wende an ' Farbe ”-Eigenschaft im style-Attribut, um die Textfarbe des Elements zu definieren.
- Verwenden Sie danach die „ ”-Element, um Text oder einen einfachen Absatz hinzuzufügen.
Unten ist der HTML-Code:
< h2 Stil = 'Farbe: rgb(84, 8, 191)' >
Linuxhint-Tutorial-Website
< / h2 >
< p > Einblendeffekt beim Laden der Seite < / p >
Die HTML-Seite wurde erfolgreich erstellt:
Um den Einblendeffekt auf der Seite anzuwenden, muss im CSS-Bereich das „ Animation ” CSS-Eigenschaft wird auf der “
Style „Körper“-Element
Karosserie {Animation: FadeInPage Ease 3s;
Anzahl der Animations-Iterationen: einer ;
}
Der „
“ wird mit den folgenden CSS-Eigenschaften angewendet:- „ Animation ” ist die abgekürzte Eigenschaft, die die Animation festlegt, indem mehrere Werte angegeben werden. Hier werden der Animationsname, die Animationszeitfunktion und die Animationsdauer definiert.
- „ Anzahl der Animations-Iterationen “ definiert, wie oft die Animation iterieren soll.
Wende „@keyframes“-Regeln auf „Animation“ an
@keyframes fadeInPage {0 % {
Opazität: 0 ;
}
100 % {
Opazität: einer ;
}
}
Zur Definition des „ @Keyframes ” Regeln für die Animation, geben Sie den Namen der Animation nach dem Schlüsselwort @keyframes an. Ändern Sie das Animationsverhalten wie folgt:
- Bei ' 0% ” Animation, die “ Opazität ”-Eigenschaft wird der Wert 0 zugewiesen. Dies bedeutet, dass das Bild zu Beginn der Animation transparent ist.
- Bei ' 100% ”-Animation wird die Deckkraft auf “ einer “, was sich auf eine Volltonfarbe bezieht.
Ausgabe
Kommen wir zur zweiten Methode zum Anwenden des Fade-in-Effekts beim Laden der Seite.
Methode 2: Einblendeffekt mit der CSS-Eigenschaft „transition“.
Fügen Sie ein „ laden ”-Attribut innerhalb des “
In diesem Beispiel ist das CSS „ Überleitung ”-Eigenschaft wird verwendet, um einen Einblendeffekt hinzuzufügen:
Karosserie {Opazität: 0 ;
Übergang: Deckkraft 6s;
}
Es folgt die Erklärung der oben genannten Eigenschaften:
- „ Opazität ”-Eigenschaft definiert die Transparenz der Elemente.
- Verwendung von CSS “ Überleitung “, ändern Sie allmählich die Werte von Eigenschaften über eine bestimmte Zeit.
Ausgabe
Wir haben Ihnen die Methoden zur Verwendung von CSS für einen Einblendeffekt beim Laden der Seite beigebracht.
Fazit
Mehrere CSS-Eigenschaften können verwendet werden, um einen Einblendeffekt auf HTML-Elemente anzuwenden. Genauer gesagt die „ Animation “, „ Opazität ', und ' Überleitung ”-Eigenschaften können verwendet werden, um animierte Effekte auf Seiten oder Elementen festzulegen. Die Animationen werden mit dem „ @keyframe ' Regeln. In diesem Artikel wurden die Methoden zum Hinzufügen eines Einblendeffekts beim Laden der Seite mithilfe von CSS erläutert.