Was bedeutet Ladeanimation? Mehrere Ladeanimationen in reinem CSS implementiert

Der Inhalt dieses Artikels befasst sich mit der Bedeutung von Ladeanimationen. Mehrere in reinem CSS implementierte Ladeanimationen haben einen gewissen Referenzwert. Freunde in Not können auf sie verweisen.

1: Was bedeutet Ladeanimation?

Viele Leute sehen beim Spielen Animationen, die darauf hinweisen, dass das Netzwerk nicht verfügbar ist Die Animation erscheint entweder, weil es einen Link gibt, auf dem das Spiel erscheint, oder weil ein Problem mit dem Player vorliegt. [Empfohlene Lektüre: Umfassende Sammlung von Ladeanimationen]

2: Mehrere Ladeanimationen in reinem CSS implementiert

oder Da die Webseite groß ist oder weil Front-End-Bibliotheken wie Vue verwendet werden, sehen Betrachter beim Öffnen der Webseite oft eine Zeit lang einen weißen Bildschirm. Der übliche Ansatz besteht darin, dem Benutzer einen leeren Bildschirm anzuzeigen Bildschirm, bevor das erste Bildschirm-Rendering der Webseite abgeschlossen ist. Blenden Sie die Lade-Animation aus, nachdem die Seite gerendert wurde. Bitte sehen Sie sich die Legende an.

Erstens ist die erste Variante die einfachste. Für HTML ist nur ein Tag erforderlich, und für CSS sind nur wenige Zeilen erforderlich. Lassen Sie uns kurz über die Idee sprechen: Legen Sie für ein Element gleiche Werte für Breite und Höhe fest, setzen Sie den Randradius auf 50 %, um daraus einen Kreis zu machen, stellen Sie die Hintergrundfarbe auf transparent ein und fügen Sie dem Element einen Rand von einigen Pixeln hinzu , und passen Sie es an die Farbe an, die Ihnen gefällt. Beachten Sie, dass Sie hier den Rand einer Seite auf transparent setzen müssen, damit er wie ein Ring mit nur drei Vierteln aussieht, und ihn dann animieren müssen, damit er sich bewegt. Wenn Sie transform:translate(-50%, -50%) für ein positioniertes Element in Kombination mit 50 % von oben und links festlegen, kann das Element horizontal und vertikal zentriert werden. Der Grund, warum „translate(-50%, -50%)“ in der Form „and to“ geschrieben wird, liegt darin, dass Sie, wenn Sie „transform:translate(-50%, -50%)“ direkt auf das Element schreiben, auch „translate:“ schreiben. „translate(-50%, -50%)“ in der Animation. „transform: rotation(0deg)“ überschreibt das Transformationsattribut des Elements und verhindert, dass es zentriert wird.

Die zweite Idee besteht darin, drei Kreise nebeneinander zu konstruieren und eine bestimmte Animationsverzögerung festzulegen, damit die drei Kreise das Gefühl haben, dass die Animation unendlich und abwechselnd abgespielt wird dass die Animation von Anfang bis Ende und dann vom Ende bis zum Anfang abgespielt wird.

Der dritte Typ ist etwas komplizierter als die ersten beiden. Hier werden acht absolut positionierte Kreise verwendet, und das Transformationsattribut wird verwendet, um sie nacheinander von der Mitte zum Rand zu verschieben Zwei und der Mittelpunkt des Kreises sind Der Winkel beträgt 45 Grad. Durch Drehen um ein Vielfaches von 45 Grad und anschließendes Verschieben um einen bestimmten Abstand werden die Ergebnisse unterschiedlicher Ordnungen beeinflusst. Legen Sie dann einfach die Animationsverzögerung für jede Kreisregel fest. Die Animation verwendet hier Änderungen in Breite und Höhe ohne Skalierung, da transform:scale() das zuvor festgelegte Transformationsattribut überschreibt und dazu führt, dass sich die Kreise nicht ausbreiten.

Was bedeutet die Ladeanimation? Eine vollständige Einführung in mehrere in reinem CSS implementierte Ladeanimationen. Wenn Sie mehr über das CSS3-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWas bedeutet Ladeanimation? Mehrere Ladeanimationen in reinem CSS implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!