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
So starten Sie die RabbitMq-Software automatisch, wenn CentOS gestartet wird
1. Erstellen Sie ein neues Rabbitmq im Verzeichni...
Detailliertes Tutorial zur Installation von Mysql5.7.19 auf Centos7 unter Linux
1. MySQL herunterladen URL: https://dev.mysql.com...
Nginx-Inhaltscache und allgemeine Parameterkonfigurationsdetails
Anwendungsszenarien: Die Seiten des Projekts müss...
Detaillierte Erklärung der Requisiten und Kontextparameter der SetUp-Funktion in Vue3
1. Der erste Parameter props der setUp-Funktion s...
Beispiel für utf8mb4-Sortierung in MySQL
Allgemeine utf8mb4-Sortierregeln in MySQL sind: u...
Schleifenmethoden und verschiedene Durchlaufmethoden in js
Inhaltsverzeichnis for-Schleife While-Schleife do...
So stellen Sie versehentlich von rm gelöschte Dateien in einer Linux-Umgebung wieder her
Inhaltsverzeichnis Vorwort Gibt es nach RM noch H...
Details zum Schreiben von React in einem Vue-Projekt
Wir können jsx/tsx-Dateien direkt erstellen Die P...
Analyse des Prinzips des dynamischen Proxys des Mybatis-Mappers
Vorwort Bevor wir mit der Erklärung des Prinzips ...
Website-Erstellungs-Tutorial für Anfänger: Lernen Sie, in zehn Tagen eine Website zu erstellen
Das 10-tägige Tutorial verwendet eine äußerst ver...
Zusammenfassung einiger Situationen, in denen die Docker-Containerfestplatte voll ist
Vorwort Dieser Artikel beschreibt zwei Situatione...
Detaillierte Erläuterung der Verwendung des Synchronisierungsmodifikators bei der Parameterübertragung von übergeordneten und untergeordneten Komponenten in Vue3
Inhaltsverzeichnis Erläuterung des unidirektional...
Verwenden Sie die Renderfunktion, um hoch skalierbare Komponenten zu kapseln
brauchen: In der Hintergrundverwaltung gibt es hä...
52 SQL-Anweisungen, die Ihnen Leistungsoptimierung beibringen
1. Um die Abfrage zu optimieren, sollten Sie voll...
Schreiben Sie ein MySQL-Datensicherungsskript mithilfe der Shell
Ideen Eigentlich ist es ganz einfach Schreiben Si...