CSS3 laden, was bedeutet das?

css3-Laden bezieht sich auf den durch CSS3 erzielten Lade- und Puffereffekt: 1. Implementieren Sie das Laden über das Transformationsattribut. 2. Implementieren Sie das Laden über das Animationsrichtungsattribut usw.

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Empfohlen: CSS-Video-Tutorial

Was bedeutet CSS3-Ladeanimation?

Die Ladeanimation bedeutet Laden und Puffern.

Viele Leute sehen beim Spielen Animationen, die darauf hinweisen, dass das Spiel geladen oder gepuffert wird, wenn das Netzwerk nicht verfügbar ist, oder wenn ein Problem mit dem Player vorliegt.

Möglicherweise wird aufgrund der Größe der Webseite oder aufgrund der Verwendung von Front-End-Bibliotheken wie Vue beim Öffnen der Webseite häufig für einen bestimmten Zeitraum ein weißer Bildschirm angezeigt Rendern Sie den ersten Bildschirm, bevor die Webseite fertiggestellt ist. Zeigen Sie dem Benutzer eine Ladeanimation an und blenden Sie die Ladeanimation dann aus, nachdem die Seite gerendert wurde.

Mehrere Ladeanimationen in reinem CSS implementiert

Jetzt stellen wir Ihnen einige sehr einfache CSS-Animationen vor

Zuallererst ist die erste die einfachste, HTML benötigt nur ein Tag, CSS auch Nur ein paar Zeilen. Lassen Sie uns kurz über die Idee sprechen: Stellen Sie die Breite und Höhe eines Elements auf gleiche Werte ein, stellen Sie den Randradius auf 50 % ein, um daraus einen Kreis zu machen, stellen Sie die Hintergrundfarbe auf transparent ein, fügen Sie dem Element ein paar Pixel Rand hinzu, und passen Sie es an die Farbe an, die Ihnen gefällt. Beachten Sie, dass Sie hier den Rand einer Seite transparent einstellen 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. translator(-50%,-50%)“ in der Animation. transform:rotate(0deg)“ überschreibt das Transformationsattribut des Elements und verhindert, dass es zentriert wird.

Die zweite Idee ist: Konstruieren Sie drei Kreise nebeneinander und stellen Sie eine bestimmte Animationsverzögerung ein, damit die drei Kreise das Gefühl haben, dass die Animation endlos abgespielt wird, und dass die Animation abwechselnd abgespielt wird Beginnen Sie vom Anfang bis zum Ende und dann vom Ende bis zum Anfang.

Der dritte ist etwas komplizierter als die ersten beiden. Hier verwenden wir acht absolut positionierte Kreise und verwenden das Transformationsattribut, um sie nacheinander von der Mitte zum Rand zu verschieben Der Kreis beträgt 45 Grad, also durch Drehen um ein Vielfaches von 45 Grad und anschließendes Verschieben um einen bestimmten Abstand, um die Ergebnisse zu beeinflussen. 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.

Das obige ist der detaillierte Inhalt vonCSS3 laden, was bedeutet das?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!