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

Verwenden Sie Docker, um einen Redis-Master-Slave-Replikationscluster zu erstellen

HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten

Verwenden Sie Docker, um einen Redis-Master-Slave-Replikationscluster zu erstellen

Ansible - Bereitstellungsmethode für automatisierten Betrieb und Wartung für Linux-Systeme

MySQL 8.0 Upgrade-Erfahrung

Konfigurieren Sie ein Implementierungsbeispiel für den Mysql-Master-Slave-Dienst

vue + springboot realisiert die Login-Funktion

Auszeichnungssprache - Bildersetzung

Nginx: Ein Domänenname für den Zugriff auf mehrere Projekte – Methodenbeispiel

Lösung für die langsame Reaktion des Tomcat-Servers

Dynamische Vue-Komponente

react-beautiful-dnd implementiert die Drag-and-Drop-Funktion für Komponenten

Artikel empfehlen

Detailliertes Tutorial zur Installation von VirtualBox 6.0 auf CentOS 8 / RHEL 8

Implementierung des Vue 3.x-Projekts basierend auf Vite2.x

Lösen Sie das Problem verschwindender Docker-Images

Beantworten Sie das Caching-Prinzip von Keep-Alive-Komponenten aus Sicht des Quellcodes

Installieren Sie Tomcat und stellen Sie die Website unter Linux bereit (empfohlen)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 sowie zur Kennwortänderung unter Linux

Analyse des Unterschieds zwischen fettgedrucktem <b> und <strong>

CSS implementiert problemlos Container auf Blockebene mit festem Verhältnis

9 praktische Tipps zum Erstellen von Webinhaltsseiten

Tutorial-Diagramm zur VMware-Installation des Ubuntu 20.04-Betriebssystems

Detaillierte Erklärung der Vuex-Umgebung

Reines CSS3 realisiert den Effekt des Ein- und Austretens von Divs in der richtigen Reihenfolge

Detaillierte Erläuterung des MySQL-Indexprinzips und der Abfrageoptimierung

Vue verwendet el-tree Lazy Loading, um die Funktionen Hinzufügen, Löschen, Ändern und Abfragen zu implementieren.

Erläuterung der Array-Verarbeitung in React und Redux