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 Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios
Inhaltsverzeichnis Ideen Abfangen von Anfragen An...
4 Scan-Tools für den Linux-Desktop
Obwohl die papierlose Welt noch nicht angebrochen...
Detailliertes Tutorial zur Installation einer MySQL-Datenbank in einer Linux-Umgebung
1. Installieren Sie die Datenbank 1) yum -y insta...
Implementierung des Umschreibesprungs in Nginx
1. Neuer und alter Domain-Namenssprung Anwendungs...
Detaillierte Erklärung zur Verwendung des Befehls tcpdump zum Erfassen und Analysieren von Datenpaketen in Linux
Vorwort tcpdump ist ein bekanntes Befehlszeilento...
Drei Möglichkeiten zur Implementierung des Wasserfall-Flow-Layouts
Vorwort Als ich heute Xianyu durchsuchte, fiel mi...
So erweitern Sie Vue Router-Links in Vue 3
Vorwort Das Tag <router-link> ist ein großa...
20 Wegweiser auf dem Weg zum exzellenten UI (User Interface)-Designer
Einleitung: Der Interface-Designer Joshua Porter h...
Reines CSS für eine coole Ladeanimation
Schauen wir uns an, welche Ladeanimationseffekte ...
JS verwendet die Methode „reduce()“, um Baumstrukturdaten zu verarbeiten
Inhaltsverzeichnis Definition Grammatik Beispiele...
JavaScript zum Implementieren einer zeitlich begrenzten Flash-Sale-Funktion
In diesem Artikel wird der spezifische JavaScript...
Tutorial zur Installation und Konfiguration des mysql8.0-ZIP-Pakets für Windows x64
Zip-Installationsschritte für die MySQL 8-Windows...
js canvas realisiert Bilder mit abgerundeten Ecken
In diesem Artikel wird der spezifische Code von J...
So installieren Sie eine MySQL-Datenbank unter Ubuntu
Ubuntu ist ein kostenloses und quelloffenes Deskt...
Html+CSS-Zeichnungsdreiecksymbol
Schauen wir uns zunächst die Renderings an: XML/H...