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

Bildbeschreibung hier einfügen

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

Detaillierte Erläuterung von Kompatibilitätsproblemen und Lösungen zum Festlegen der maximalen und minimalen Breite in der Tabelle

Festlegen der Eigenschaften für Mindest- und Maxi...

HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten

Linux: Fünf-Schritte-Kernel-Build-Baum

Zusammenfassung der Methoden zum Suchen und Löschen doppelter Daten in MySQL-Tabellen

Mini-Programm implementiert benutzerdefinierte mehrstufige Einzelauswahl und Mehrfachauswahl

Vollbild-Drag-Upload-Komponente basierend auf Vue3

So installieren Sie schnell eine Tensorflow-Umgebung in Docker

Realisieren Sie eine dreistufige Verknüpfung von Jahr, Monat und Tag basierend auf JavaScript

Erstellen Sie eine Scala-Umgebung unter Linux und schreiben Sie ein einfaches Scala-Programm

Vue implementiert eine einfache Produktion von Zählern

So lösen Sie das Problem des verstümmelten MySQL-Inserts

Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04

Artikel empfehlen

Detaillierte Erläuterung von Kompatibilitätsproblemen und Lösungen zum Festlegen der maximalen und minimalen Breite in der Tabelle

Lernen Sie, wie Sie Portainer zur Verwaltung mehrerer Docker-Containerumgebungen verwenden.

So setzen Sie Ihr Linux-Passwort zurück, wenn Sie es verloren haben

Der Aufruf der Suchmaschine auf der Seite erfolgt am Beispiel von Baidu

Tutorial zu HTML-Tabellen-Tags (12): Rahmenstil-Attribut FRAME

Tipps zum Gestalten der Fotovorschau-Navigation auf Webseiten

Ein vollständiges Beispiel für die mehrstufige Sprungfunktion (Seiten-Drilldown) von Vue für verwandte Seiten

So zeigen Sie im Hintergrund laufende Programme in Linux an und schließen sie

Textarea-Tag in HTML

HeidiSQL-Tool zum Exportieren und Importieren von MySQL-Daten

Detaillierte Erläuterung verschiedener praktischer Verwendungen virtueller Gerätedateien im Linux-System

(MariaDB) Umfassende Erklärung der MySQL-Datentypen und Speichermechanismen

JavaScript-Code zur Implementierung der Weibo-Batch-Unfollow-Funktion

So zeigen Sie ein kleines Symbol vor der Browser-URL an

Detaillierte Erklärung zum Anzeigen der Anzahl der MySQL-Server-Threads