Dies ist der Effekt der Element-UI-Ladekomponente. Sieht cool aus. Lass es uns implementieren! analysierenDie Animation besteht aus zwei Teilen: Der blaue Bogen erstreckt sich von einem Punkt zu einem Kreis und schrumpft dann vom Kreis zu einem Punkt. Der übergeordnete Knoten des Kreises rotiert mit dem Kreis Code <svg viewBox="25 25 50 50" Klasse="Box"> <Kreis cx="50" cy="50" r="20" Füllung="keine" Klasse="Kreis"></Kreis> </svg> CSS .Kasten { Höhe: 200px; Breite: 200px; Hintergrund: Weizen; } .Box .Kreis { Strichbreite: 2; Schlaganfall: #409eff; Strichlinienende: rund; } Fügen Sie Animationseffekte hinzu /* Rotationsanimation */ @keyframes drehen { Zu { transformieren: drehen (1 Drehung) } } /* Bogenanimation */ /* 125 ist der Umfang des Kreises */ @keyframes Kreis { 0% { /* Status 1: Punkt */ Strich-Dasharray: 1 125; Strich-Dashoffset: 0; } 50 % { /* Zustand 2: Kreis */ Strich-Dasharray: 120, 125; Strich-Dashoffset: 0; } Zu { /* Zustand 3: Punkt (Schrumpfung in Drehrichtung) */ Strich-Dasharray: 120 125; Strich-Schema-Höhepunkt: -125px; } } .Kasten { /* ...dasselbe wie oben*/ Animation: 2 s rotieren, linear, unendlich; } .Kreis { /* ...dasselbe wie oben*/ Animation: Kreis 2s unendlich; } Zum Schluss den Hintergrund entfernen Online-Code-Demo https://jsbin.com/yarufoy/edit?html,css,output Dies ist das Ende dieses Artikels darüber, wie man mit reinem HTML+CSS einen Elementladeeffekt erzielt. Weitere relevante Inhalte zum Erzielen des Ladens mit HTML+CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Beispielcode zur Implementierung der olympischen Ringe mit reinem HTML+CSS
>>: Ausführliche Erläuterung der HTML-Grundlagen (Teil 1)
Inhaltsverzeichnis Vorwort 1. Laden Sie MySQL von...
Effektanzeige Die eingebaute Boot-Oberfläche ist ...
Inhaltsverzeichnis Umfang Globaler Umfang Funktio...
1. Schreiben Sie ein Backup-Skript rem Autor:www....
1. Der erste Parameter props der setUp-Funktion s...
Inhaltsverzeichnis 1. Knoten, Bäume und virtuelle...
Dig-Einführung: Dig ist ein Tool, das DNS einschl...
1. Befehlseinführung Mit dem Datumsbefehl wird di...
watch : auf Datenänderungen achten (Änderungserei...
Ein zusammengesetzter Index (auch gemeinsamer Ind...
Zusammenfassung: Analyse von zwei MySQL SQL-Anwei...
Front-End-Projektpaketierung Suchen Sie .env.prod...
1. Die chinesischen verstümmelten Zeichen erschei...
Manchmal müssen wir Server stapelweise bedienen, ...
Vorwort Als grundlegende Datenstruktur spielen Ar...