Implementierung des CSS-Quellcodes für herzförmige Ladeanimationen
|
Lassen Sie mich Ihnen ohne weitere Umschweife den Code zeigen. Der Code ist sehr einfach und Sie werden ihn verstehen, nachdem Sie ihn studiert haben. Wenn Sie Fragen haben, können Sie sie mir stellen.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<Titel></Titel>
<style type="text/css">
.Herz-Laden {
Rand oben: 120px;
Breite: 200px;
Höhe: 200px;
}
ul {
Listenstil: keiner;
Anzeige: Flex;
Inhalt ausrichten: Abstand dazwischen;
Breite: 150px;
Höhe: 10px;
/* Die Idee, Herzform und Streifenform zu erstellen, ist dieselbe, aber die Höhe jedes Streifens ist unterschiedlich*/
}
li {
--Anzahl: 9;
--rgb: Berechnung(var(--index) / var(--count) * .5Umdrehungen);
/* Stellen Sie die Verzögerung nicht zu langsam ein. Wenn sie zu langsam ist, ist die Herzform nicht sichtbar. Passen Sie die Verzögerung und die Dauer der Animation gleichzeitig an*/
--Zeit: berechnet((var(--index) - 1) * 150ms);
Rahmenradius: 5px;
Breite: 10px;
Höhe: 10px;
Hintergrundfarbe: #003BB3;
/* Durch die Verwendung der Fiter-Funktion kann der Farbverlauf sehr schön gestaltet werden*/
Filter: Farbton-Rotation (var(--rgb));
/* Nachfolgend sehen Sie die Dauer der Animation*/
Animationsdauer: 2,5 s;
Animationsverzögerung: var(--time);
Anzahl der Animationsiterationen: unendlich;
}
.Zeile-1,
.Zeile-9 {
Animationsname: Linienbewegung-1;
}
.Zeile-2,
.Zeile-8 {
Animationsname: Linienbewegung 2;
}
.Zeile-3,
.Zeile-7 {
Animationsname: Linienbewegung 3;
}
.Zeile-4,
.Zeile-6 {
Animationsname: Linienbewegung 4;
}
.Zeile-5 {
Animationsname: Linienbewegung 5;
}
/* Symmetrische Animationen sollten auf gleicher Höhe sein, damit die Herzform sichtbar ist*/
@keyframes Zeilenverschiebung-1 {
0%,
10 %,
90%,
100 % {
Höhe: 10px;
}
45 %,
55 % {
Höhe: 30px;
transformieren: übersetzen3d(0, -15px, 0);
}
}
@keyframes Zeilenverschiebung-2 {
0%,
10 %,
90%,
100 % {
Höhe: 10px;
}
45 %,
55 % {
Höhe: 60px;
transformieren: übersetzen3d(0, -30px, 0);
}
}
@keyframes Zeilenverschiebung-3 {
0%,
10 %,
90%,
100 % {
Höhe: 10px;
}
45 %,
55 % {
Höhe: 80px;
transformieren: übersetzen3d(0, -40px, 0);
}
}
@keyframes Zeilenverschiebung-4 {
0%,
10 %,
90%,
100 % {
Höhe: 10px;
}
45 %,
55 % {
Höhe: 90px;
transformieren: übersetzen3d(0, -30px, 0);
}
}
@keyframes Zeilenverschiebung-5 {
0%,
10 %,
90%,
100 % {
Höhe: 10px;
}
45 %,
55 % {
Höhe: 90px;
transformieren: übersetzen3d(0, -20px, 0);
}
}
</Stil>
</Kopf>
<Text>
<div Klasse="Herz-Laden">
<ul>
<li class="line-1" style="--index: 1"></li>
<li class="line-2" style="--index: 2"></li>
<li class="line-3" style="--index: 3"></li>
<li class="line-4" style="--index: 4"></li>
<li class="line-5" style="--index: 5"></li>
<li class="line-6" style="--index: 6"></li>
<li class="line-7" style="--index: 7"></li>
<li class="line-8" style="--index: 8"></li>
<li class="line-9" style="--index: 9"></li>
</ul>
</div>
</body>
</html>
Dies ist das Ende dieses Artikels über die Implementierung des CSS-Quellcodes für herzförmige Ladeanimationen. Weitere verwandte Inhalte zu herzförmigen Ladeanimationen in CSS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Eine einfache Möglichkeit, Desktop-Exe-Programme auf einer Webseite aufzurufen
>>: Eine Analyse von Div+Float, einem sehr wichtigen Konzept im Website-Design
Artikel empfehlen
Detaillierte Erklärung, warum die langsame Abfrageprotokollzeit von MySQL 5.7 8 Stunden hinter der Systemzeit liegt
Beim Überprüfen der langsamen Abfrage stellte ich...
Verwenden von JS zum Implementieren von Beispielcode für den Algorithmus zur binären Baumdurchquerung
Inhaltsverzeichnis Vorwort 1. Binärer Baum 1.1. D...
Eine kurze Erläuterung der Syntax der VUE-Uni-App-Vorlage
1.v-bind (Abkürzung:) Um in Daten definierte Date...
Implementierung einer kreisförmigen CSS-Aushöhlung (Gutschein-Hintergrundbild)
In diesem Artikel werden hauptsächlich kreisförmi...
Tutorial zu HTML-Tabellen-Tags (8): Hintergrundbild-Attribut BACKGROUND
Legen Sie ein Hintergrundbild für die Tabelle fes...
Detaillierte Erklärung zur Installation der MySQL-Datenbank auf dem Alibaba Cloud Server
Vorwort Da ich während des Lernprozesses Zookeepe...
So konfigurieren Sie Nginx, um den Datenverkehr basierend auf dem letzten Segment der Anforderungs-IP aufzuteilen
Es handelt sich hauptsächlich um den Konfiguratio...
Detailliertes Beispiel für die Bereitstellung der dynamischen und statischen Trennung von Nginx+Apache
Einführung in die dynamische und statische Trennu...
Zusammenfassung einiger kleinerer Probleme mit der MySQL-Autoinkrement-ID
Die folgenden Fragen basieren alle auf der InnoDB...
So verwenden Sie Docker zum Erstellen eines Tomcat-Clusters mit Nginx (mit Bildern und Text)
Erstellen Sie zunächst einen Tomcat-Ordner. Um di...
Tutorial zur Installation von MySQL unter Linux
Inhaltsverzeichnis 1. Löschen Sie die alte Versio...
Eine kurze Diskussion über JS-Verpackungsobjekte
Inhaltsverzeichnis Überblick Definition Instanzme...
Mehrere Möglichkeiten zum Übergeben von Daten von übergeordneten Komponenten an untergeordnete Komponenten in Vue
Ich habe kürzlich den Quellcode von Vue studiert ...
Schritte für Docker zum Erstellen eines privaten Lagerhafens
Hafen Harbor ist eine Open-Source-Lösung zum Erst...
Verwendung von Docker-Image-Speicher-Overlays
1. Übersicht Das Image in Docker ist in Schichten...