HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten
|
Heute werden wir einen einfachen Herzschlageffekt erstellen. Dafür ist nicht viel Code erforderlich. Fügen Sie einfach ein Kästchen hinzu und nutzen Sie CSS voll aus, um es anzuzeigen. 1. Zuerst fügen wir der Seite eine visuelle Box hinzu <Text> <div Klasse="Herz"></div> </body> 2. Dann verwandle es zuerst in ein Herz
.Herz{
Position: relativ;
Breite: 100px;
Höhe: 100px;
Rand: 100px;
}
.Herz:nach,
.Herz:vorher{
Position: absolut;
Breite: 60px;
Höhe: 100 %;
Hintergrundfarbe: #ff6666;
Inhalt:"";
Randradius: 50 % 50 % 0 0;
}
.Herz:vorher{
links: 0;
transformieren: drehen (-52 Grad);
}
.Herz:nach{
rechts:0;
transformieren: drehen (49 Grad);
}
3. Richten Sie abschließend die Animation ein. Hier muss ich sagen, dass die Animation zusammen mit @keyframes verwendet werden muss, denn wie kann die Animation ohne Animationsrahmen ablaufen? Es ist, als würden Sie zwei Essstäbchen verwenden, und Sie verwenden definitiv nicht nur eines.
Animation: Maßstab 1 s linear unendlich;
/*Nenne 1s gleichmäßige Endlosschleife*/
Wir machen es horizontal und vertikal doppelt so groß
@keyframes scale{ /* Animationsbild */
50 % {transform:scale(2)}
}
Dann schauen wir uns die Wirkung an
Haha, es ist ein bisschen hässlich. Wenn es dir nicht gefällt, kannst du das Aussehen selbst ändern. Schließlich ist die persönliche Ästhetik begrenzt. Hahaha. Dies ist mein erster Blog und ich weiß nicht, wie ich mich ausdrücken soll. Wie auch immer, der Prozess ist hier. Hier ist der Quellcode ~
<!doctype html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Herzschlag-Effekt</title>
<Stil>
*{Rand:0; Polsterung:0;}
li{Listenstil: keine;}
ein {text-decoration:none;}
.Herz{
Position: relativ;
Breite: 100px;
Höhe: 100px;
Rand: 100px;
Animation: Maßstab 1 s linear unendlich;
/*Nenne 1s gleichmäßige Endlosschleife*/
}
@keyframes scale{ /*Muss Animationsframes zusammen mit Animationen verwenden*/
50 % {transform:scale(2)}
}
.Herz:nach,
.Herz:vorher{
Position: absolut;
Breite: 60px;
Höhe: 100 %;
Hintergrundfarbe: #ff6666;
Inhalt:"";
Randradius: 50 % 50 % 0 0;
}
.Herz:vorher{
links: 0;
transformieren: drehen (-52 Grad);
}
.Herz:nach{
rechts:0;
transformieren: drehen (49 Grad);
}
</Stil>
</Kopf>
<!-- Visualisierungsbereich -->
<Text>
<div Klasse="Herz"></div>
</body>
</html>Dies ist das Ende dieses Artikels zum Erstellen von Herzschlag-Spezialeffekten mit HTML+CSS. Weitere relevante HTML+CSS-Herzschlag-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Zentrieren des Formulars in HTML
>>: HTML+CSS zum Erstellen einer Schaltfläche im Cyberpunk-Stil
Artikel empfehlen
Praktische Aufzeichnung der MySQL 5.6 Master-Slave-Fehlerberichterstattung
1. Problemsymptome Version: MySQL 5.6, unter Verw...
5 JavaScript-Möglichkeiten zum Abflachen von Arrays
Inhaltsverzeichnis 1. Konzept der Array-Abflachun...
Sieben Möglichkeiten zur Implementierung der Array-Deduplizierung in JS
Inhaltsverzeichnis 1. Verwenden von Set()+Array.f...
So generieren Sie Zufallszahlen mit angegebenen Ziffern in MySQL und so generieren Sie Zufallszahlen in Stapeln
1. Stellen Sie zunächst einige häufig verwendete ...
Detaillierte Erklärung zur Verbindung von Java mit Mysql Version 8.0.18
In Bezug auf die Verbindungsmethode zwischen Java...
Führen Sie die Schritte zum Aktivieren der GZIP-Komprimierung in Nginx aus.
Inhaltsverzeichnis Vorwort 1. Konfigurieren Sie d...
Detaillierte Erläuterung der Generierung dynamischer Bibliotheken unter Linux und Anleitung zur Verwendung
Der Dateiname der dynamischen Bibliotheksdatei un...
Docker-Dateispeicherpfad, Port-Mapping-Betriebsmodus ändern
So erhalten Sie den Container-Startbefehl Der Con...
VUE führt die Implementierung der Verwendung von G2-Diagrammen ein
Inhaltsverzeichnis Über G2 Chart verwenden Vollst...
Detaillierte Erläuterung des Kapselungsbeispiels für Netzwerkanforderungen
Exportstandard ({ URL (URL = URL = URL), Methode ...
Implementierung der Festlegung einer festen IP beim Starten eines Docker-Containers
Netzwerktyp nach der Docker-Installation [root@in...
Schritte zum Verpacken und Freigeben des Vue-Projekts
Inhaltsverzeichnis 1. Übergang von der Entwicklun...
Detaillierte Erläuterung der Tomcat-Konfigurations- und Optimierungslösungen
Service.xml Die Konfigurationsdatei Server.xml wi...
Mehrere Methoden für js zur Bestimmung der horizontalen und vertikalen Bildschirmansichtsfenstererkennung von mobilen Endgeräten
Inhaltsverzeichnis 1. So erhalten Sie unterschied...
Implementierung der Docker-Container-Verbindung und -Kommunikation
Die Portzuordnung ist nicht die einzige Möglichke...