Beispielcode für den dynamischen CSS-Ladebalkeneffekt
|
Mit dem Wissen über CSS-Variablen werde ich den Code und die Kommentare, die ich hinzugefügt habe, direkt veröffentlichen
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Eine dynamische CSS-Ladeleiste anzeigen</title>
<Stil>
/* CSS-Variablen verwenden */
.flex {
Anzeige: Flex;
Listenstil: keiner;
/* Legt fest, dass die li-Elemente horizontal angeordnet werden */
}
.wird geladen {
Breite: 200px;
Höhe: 200px;
}
.laden>li {
/* Wir definieren eine CSS-Variable für jedes Inline-Element des li-Elements -- line-index hat unterschiedliche Größen */
/* Legen Sie jetzt eine Variable für die Animationsverzögerung fest – Zeit nach der Berechnung calc */
--Zeit: calc((var(--line-index) - 1) * 200ms);
Rahmenradius: 3px;
Breite: 6px;
Höhe: 30px;
Hintergrundfarbe: #f66;
/* Die Animationen sind alle gleich, starten aber zu unterschiedlichen Zeiten, wodurch dieser Effekt entsteht*/
Animation: Takt 1,5 s, Ein- und Ausschwingen, var(--time) unendlich;
}
.laden>li+li {
Rand links: 5px;
}
@keyframes schlagen {
0%,
100 % {
transformieren: scaleY(1);
}
50 % {
transformieren: scaleY(.5);
}
}
</Stil>
</Kopf>
<Text>
<ul Klasse="Flex wird geladen">
<li style="--line-index: 1;"></li>
<li style="--line-index: 2;"></li>
<li style="--line-index: 3;"></li>
<li style="--line-index: 4;"></li>
<li style="--line-index: 5;"></li>
<li style="--line-index: 6;"></li>
</ul>
</body>
</html>Sehen Sie die Wirkung
Dies ist das Ende dieses Artikels über den Quellcode der dynamischen CSS-Ladeleiste. Weitere relevante Inhalte zur dynamischen CSS-Ladeleiste finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Praxis der Verwendung von SuperMap in Vue
>>: Mehrere Möglichkeiten zum Planen der Sicherung einer MySQL-Datenbank (umfassend)
Artikel empfehlen
Detaillierte Erklärung zum schnellen Erstellen einer Blog-Website mit Docker
Inhaltsverzeichnis 1. Vorbereitung 2. Bereitstell...
So implementieren Sie Property Hijacking mit JavaScript defineProperty
Inhaltsverzeichnis Vorwort Deskriptoren Detaillie...
Vue implementiert Beispielcode, um die Funktion zum Speichern von Passwörtern im Browser zu deaktivieren
Informationen finden Einige im Internet gefundene...
Detaillierte Erläuterung des Beispielcodes für das elastische CSS3 Flex-Layout
1. Grundlegende Konzepte //Jeder Container kann a...
So erstellen Sie ein Drag & Drop-Plugin mit benutzerdefinierten Vue-Direktiven
Wir alle kennen die Drag-and-Drop-Funktion von HT...
Detaillierte Erklärung der Bedeutung und des Unterschieds zwischen MySQL-Zeilensperren und Tabellensperren
1. Einleitung Der Unterschied zwischen Zeilensper...
Beispiel für das Einfügen eines HTML-Bilds (html add image)
Zum Einfügen von Bildern in HTML sind HTML-Tags f...
Detaillierte Erklärung des Unterschieds zwischen chown- und chmod-Befehlen in Linux
Im Linux-System können sowohl chmod- als auch cho...
Der Ansichtsbereich im Meta-Tag steuert das Gerätebildschirm-CSS
Code kopieren Der Code lautet wie folgt: <meta...
Vue CodeMirror realisiert den Effekt des Online-Code-Compilers
Vorwort Wenn wir den Effekt der Online-Codekompil...
Eine detaillierte Einführung in primitive Werte und Wrapper-Objekte in JavaScript
Inhaltsverzeichnis Vorwort Text Primitive Typen P...
Beispiel für den Export und Import von Docker-Containern
Inhaltsverzeichnis Docker-Container exportieren D...
Lösung für die langsame Reaktion des Tomcat-Servers
1. Analytisches Denken 1. Beseitigen Sie die eige...
CSS - overflow:hidden in Projektbeispielen
Hier sind einige Beispiele, wie ich diese Eigensch...
Das Problem der Verwendung von Slots durch Vue+tsx wird nicht behoben
Inhaltsverzeichnis Vorwort Finden Sie das Problem...