Erstellen einen Einblendeffekt beim Laden der Seite in CSS

1. Verwenden Sie die Eigenschaft animation und die Regel @keyframes, um einen Fade-In-Effekt in CSS zu erstellen
2. Verwenden Sie die JQuery-Methode animate(), um einen Fade-In-Effekt in CSS zu erstellen

Der Einblendeffekt erhöht die Deckkraft des Elements von verdeckt auf sichtbar. Die Deckkraft des ausgewählten Elements ändert sich in der angegebenen Zeit.

Dieses Tutorial stellt Methoden vor, um einen solchen Effekt beim Laden der Seite in CSS zu erzielen.

Verwenden Sie die Eigenschaft animation und die Regel @keyframes, um einen Fade-In-Effekt in CSS zu erstellen

Wir haben ein wenig über den Einblendeffekt gewusst.

Diese Methode verwendet die Eigenschaft animation zusammen mit den @keyframes-Regeln, um beim Laden der Seite einen Einblendeffekt zu erzielen. Lassen Sie uns zunächst verstehen, wie die Eigenschaft animation funktioniert.

Wenn sich der Stil eines Elements im Laufe der Zeit von einem Stil zum anderen ändert, können wir erkennen, dass es sich um eine Animation handelt. Die Eigenschaft animation ist die Abkürzung für Eigenschaften wie animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count und animation- Richtung in der Reihenfolge.

Wir können die Eigenschaft animation verwenden, um nur die Eigenschaften animation-name und animation-duration anzugeben, um einen Einblendeffekt zu erzeugen. Die Regel @keyframes wird verwendet, um die CSS-Stile der ausgewählten Elemente schrittweise zu ändern.

Als Ergebnis wird ein Animationseffekt erstellt. Wir verwenden den Wert der Eigenschaft animation-name in der Regel @keyframes, um die Animation auszuwählen, auf die die sich allmählich ändernden Stile angewendet werden.

Innerhalb der @keyframes-Regel verwenden wir die Selektoren wie to und from, um die Stile anzuwenden. Die Selektoren to und from entsprechen 0% und 100%.

Die Stile, die mit den to-Selektoren angewendet wurden, ändern sich allmählich zu denen, die mit den from-Selektoren angewendet wurden. Die Änderung erfolgt zusammen mit der Zeit, die mit der Eigenschaft animation-duration angegeben ist.

Um eine Einblendanimation zu erstellen, können wir die Deckkraft der Seite mit den Selektoren in der Regel @keyframes von 0 auf 1 ändern. Die Syntax der @keyframe-Regel ist unten dargestellt.

@keyframes animation-name {
    keyframes-selector {
        css-styles;
    }
}

Schreiben Sie zum Beispiel einige Texte in ein p-Tag in HTML.

Wählen Sie in CSS das Tag html und setzen Sie die Eigenschaft animation auf fadein 2s. Dabei ist fadein der Animationsname und 2s die Animationsdauer.

Wählen Sie als Nächstes den Animationsnamen fadein mit dem Schlüsselwort @keyframes aus, wie in der obigen Syntax gezeigt. Schreiben Sie 0% als ersten Keyframe-Selektor und setzen Sie die Eigenschaft opacity auf 0.

Schreiben Sie die anderen beiden Keyframe-Selektoren in ähnlicher Weise als 50% und 100% und setzen Sie opacity auf 0.5 bzw. 1.

Hier ist beim Laden der Seite der Text zunächst weniger sichtbar, da die Deckkraft auf 0 gesetzt ist. Allmählich ändert sich die Deckkraft und der Text erscheint innerhalb von zwei Sekunden sichtbar.

Daher können wir die Eigenschaft animation verwenden, um einen Einblendeffekt zu erzeugen.

Beispielcode:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

body {
    animation: fadein 4s; 
}
@keyframes fadein {
    0% {
        opacity:0;
    }
    50%{
        opacity:0.5;
    }
    100% {
        opacity:1;
    }
}

Verwenden Sie die JQuery-Methode animate(), um einen Fade-In-Effekt in CSS zu erstellen

In dieser Methode wird ein anderer Ansatz erläutert, bei dem jQuery verwendet wird, um einen Einblendeffekt in CSS zu erstellen.

Wir können die Methode animate() in jQuery verwenden, um unser Ziel zu erreichen. Das animate() führt die allmähliche Änderung des Stils des ausgewählten Elements durch, um einen Animationseffekt zu erzeugen.

Wir können die CSS-Stile angeben und die Geschwindigkeit der Animation angeben. Die Syntax der animate()-Methode ist unten dargestellt.

(selector).animate({css - styles}, duration, easing, callback)

Wenn wir die Methode animate() verwenden, wird der Standardstil des ausgewählten Elements mit den in der Methode angegebenen Stilen überschrieben.

Zu Demonstrationszwecken verwenden wir im HTML denselben Text wie in der ersten Methode. Wählen Sie zuerst das CSS-Tag body und setzen Sie die Eigenschaft opacity auf 0.

Wählen Sie als nächstes das body-Tag in jQuery und rufen Sie die animate()-Methode auf. Stellen Sie innerhalb der Methode in den Stilen die opacity auf 1 und die duration auf 2000.

Im Beispiel unten entspricht 2000 zwei Sekunden, was der Dauer der Animation entspricht. Wenn die Seite geladen wird, ist ihre Opazität anfänglich 0 und ändert sich innerhalb von zwei Sekunden auf 1.

Auf diese Weise wird der Einblendeffekt mit jQuery erreicht.

Beispielcode:

body {
    opacity: 0;
}

$('body').animate({'opacity': '1'}, 2000);

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>