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
So konfigurieren Sie Bash-Umgebungsvariablen in Linux
Shell ist ein in der Programmiersprache C geschri...
Vollständige Liste der CentOS7-Firewall-Betriebsbefehle
Inhaltsverzeichnis Installieren: 1. Grundlegende ...
Detaillierte Erklärung zur Verwendung struktureller Pseudoklassenselektoren und Pseudoelementselektoren in CSS3
Einführung in strukturelle Pseudoklassenselektore...
Wo wird der von IntelliJ IDEA mit Tomcat bereitgestellte Projektspeicherort verwendet?
Nachdem IntelliJ IDEA ein Javaweb-Projekt mit Tom...
Beispielcode für ein einfaches, nahtlos scrollendes Karussell, implementiert mit nativem Js
Das einfache, nahtlos scrollende Karussell weist ...
So erhalten Sie Root-Berechtigungen in einem Docker-Container
Zunächst muss Ihr Container laufen Sie können die...
Sequentielles und zufälliges Schreiben auf Linux-Festplatten
1. Einleitung ● Zufälliges Schreiben führt dazu, ...
Lösung für das Problem, dass synchrone Replikationsfehler im MySQL5.6 GTID-Modus nicht übersprungen werden können
Datenbankversion: mysql> select version(); +--...
Verstehen Sie einfach die Unterschiede in den Prinzipien gängiger SQL-Delete-Anweisungen
In diesem Artikel werden hauptsächlich die Unters...
js zur Realisierung von Login- und Registrierungsfunktionen
In diesem Artikelbeispiel wird der spezifische Co...
CSS-Code zum Anordnen von Fotos in Moments
Zunächst können Sie Moments öffnen und mehrere La...
So stellen Sie Rancher mit Docker bereit (keine Fallstricke)
Vor der Inbetriebnahme unbedingt lesen: Hinweis: ...
Detaillierte Erklärung der HTML-Style-Tags und der zugehörigen CSS-Referenzen
HTML-Style-Tag Stil-Tag - Verwenden Sie dieses Ta...
mysql8.0.20 herunterladen und installieren und aufgetretene Probleme (Abbildung und Text)
1. Suchen Sie im Browser nach MySQL, um es herunt...
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...