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)
![Beispielanalyse von Linux-Benutzer- und Gruppenbefehlen [Wechseln, Hinzufügen von Benutzern, Berechtigungskontrolle usw.]](/upload/images/67cad980eef6b.webp)
Artikel empfehlen
Beispiel für ein WeChat-Applet zum Erzielen des rotierenden Laterneneffekts
Vorwort In der täglichen Entwicklung stoßen wir h...
Verwenden Sie einige Interviewfragen, um den Ausführungsmechanismus von JavaScript zu untersuchen
Inhaltsverzeichnis Vorherige Wörter Synchron und ...
Erstellen einer verteilten Selenium-Umgebung basierend auf Docker
1. Laden Sie das Bild herunter Docker-Pull Seleni...
Einfache Verwendung des Vue-Busses
Einfache Verwendung des Vue-Busses Beschreibung d...
Zusammenfassung zum Ändern des Root-Passworts in MySQL 5.7 und MySQL 8.0
MySQL 5.7-Version: Methode 1: Verwenden Sie den B...
Analyse des Unterschieds zwischen fettgedrucktem <b> und <strong>
Wir alle Webmaster wissen, dass es bei der Optimi...
Zusammenfassung der wichtigsten Docker-Befehle für Entwickler
Inhaltsverzeichnis Einführung in Docker Installat...
Eine kurze Einführung in die Gesamtstruktur von Tomcat
Tomcat ist weithin als Webcontainer bekannt. Es h...
Docker implementiert hostübergreifende Containerkommunikation basierend auf MacVLAN
Suchen Sie zwei Testmaschinen: [root@docker1 cent...
Ändern des Standarddatenverzeichnisses von MySQL 8.0 (schneller Vorgang ohne Konfiguration)
Nutzungsszenario: Wir verwenden Alibaba Cloud und...
Wissen Sie, welche Möglichkeiten es gibt, in Vue Routen zu überspringen?
Inhaltsverzeichnis Die erste Methode: Router-Link...
So verwenden Sie iframe, um die Daten anderer Webseiten unter Wahrung der Kompatibilität anzuwenden
Unten sehen Sie den Code, den Shiji Tiancheng ver...
vue + ts realisiert den Effekt des Ziehens von Elementen mit der Maus
In diesem Artikelbeispiel wird der spezifische Co...
10 hervorragende Web-UI-Bibliotheken/Frameworks
1. IT Mill-Toolkit IT Mill Toolkit ist ein Open-S...
Detaillierte Erklärung zum Festlegen des Änderungswerts innerhalb einer bestimmten Zeit in Zabbix
Hintergrundbeschreibung: Auf einem vorhandenen La...