Drei Möglichkeiten zum Zeichnen einer Herzform mit CSS

Im Folgenden stellen wir drei Möglichkeiten zum Zeichnen von Herzformen mit CSS vor. Der Implementierungsprozess ist sehr einfach und Sie werden ihn auf jeden Fall auf einen Blick erlernen.

1. Ein Div, ein Herz

Die Kernmethode zum Zeichnen eines Herzens mit einem Div besteht in der Verwendung von Pseudoelementen.

Zuerst schreiben wir ein Div auf die Seite:

<div></div>


Verwenden Sie CSS, um dieses Div in ein orangefarbenes Quadrat zu ändern:

div {
  Position: relativ;
  oben: 100px;
  links: 50%;
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: Tomate;
} 

Als Nächstes verwenden wir die beiden Pseudoelemente des Elements: „before“ und „after“, um einen blauen und einen gelben Kreis zu zeichnen und ihre Mittelpunkte jeweils oben und rechts im Quadrat zu positionieren.

div:vor {
  Inhalt: "";
  Position: absolut;
  oben: -50px;
  links: 0;
  Breite: 100px;
  Höhe: 100px;
  Randradius: 50 %;
  Hintergrundfarbe: blau;
}
div:nach{
  Inhalt: "";
  Position: absolut;
  oben: 0px;
  links: 50px;
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: gelb;
  Randradius: 50 %;
} 

Ändern Sie als Nächstes die beiden Kreise, die wir gerade implementiert haben, in die gleiche Farbe wie das Quadrat:

div:vor {
  ...
  Hintergrundfarbe: Tomate;
}
div:nach{
  ...
  Hintergrundfarbe: Tomate;
} 

Zum Schluss drehen wir das Element div um 45 Grad und wir haben die gewünschte Herzform! So einfach ist das.

div {
  Position: relativ;
  oben: 100px;
  links: 50%;
  Breite: 100px;
  Höhe: 100px;
  Hintergrundfarbe: Tomate;
  transformieren: drehen (-45 Grad);
} 

2. Ein Herz ist nicht genug, also zeichnen wir einen Bildschirm

Ein Herz reicht nicht aus, um meine Gefühle auszudrücken, deshalb werde ich für sie einen Bildschirm aus Herzen zeichnen.

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

Ich habe unendlich viele Gefühle für dich und unendlich viele Divs, über die ich schreiben kann:

HTML

<h1>Liebe ist überall...</h1>
<div Klasse="Herz"></div>
<div Klasse="Herz"></div>
<div Klasse="Herz"></div>
<div Klasse="Herz"></div>
<div Klasse="Herz"></div>
<div Klasse="Herz"></div>
<div Klasse="Herz"></div>
<div Klasse="Herz"></div>
...

Lassen Sie sie schweben, sodass sie den gesamten Bildschirm ausfüllen:

.Herz{
  Position: relativ;
  Breite: 100px;
  Höhe: 90px;
  schweben: links;
}

Die beiden Pseudoelemente stellen meinen linken und rechten Vorhof dar:

.Herz:vorher,
.Herz:nach{
  Position: absolut;
  Inhalt: "";
  links: 50px;
  oben: 0;
  Breite: 50px;
  Höhe: 80px;
  Hintergrund: #fc2e5a;
  Rahmenradius: 50px 50px 0 0;
  Transform-Ursprung: 0 100 %;
}
.Herz:nach{
  links: 0;
  Transform-Ursprung: 100 % 100 %;
} 

Durch Drehen des linken und rechten Vorhofs um 45 Grad kann ich einen Bildschirm voller Herzen sehen:

.Herz:vorher,
.Herz:nach{
  ...
  transformieren: drehen (-45 Grad);
}
.Herz:nach{
  ...
  transformieren: drehen (45 Grad);
} 

3. Wie tief ist meine Liebe zu dir

„Früher sah ich die Dinge mit meinen physischen Augen, aber in dem Moment, als ich starb, begann ich, die Welt mit den Augen meines Geistes zu sehen, und ich konnte alles klarer sehen als je zuvor.“ – Stephen Chow

Egal, wie viele Herzen ich habe, sie können nicht ausdrücken, wie tief meine Liebe zu dir ist. Deshalb möchte ich, dass du siehst, dass mein Herz aus jeder Zelle besteht, die dich liebt:

<div class="heart"></div>

CSS:

.Herz {
  Position: absolut;
  links: 50%;
  oben: 50 %;
  Breite: 105px;
  Höhe: 105px;
  Rand: -52,5px 0 0 -52,5px;
}

Die Welt auf Pixelebene kann durch die Box-Shadow-Eigenschaft erreicht werden:

.Herz::vorher {
  Inhalt: '';
  Anzeige: Block;
  Übergang: alle 400ms;
  Breite: 15px;
  Höhe: 15px;
  Rand: -15px 0 0 -15px;
  box-shadow: 30px 15px #8e1a19, 45px 15px #ac0500, 75px 15px #f73f0c, 90px 15px #fa5f27, 15px 30px #740100, 30px 30px #8e0500, 45px 30px #8e1918, 60px 30px #ca1300, 75px 30px #f34f2b, 90px 30px #df351f, 105px 30px #f77c2a, 15px 45px #4b0000, 30px 45px #690100, 45px 45px #8e0f0b, 60px 45px #bf1000, 75px 45px #f84010, 90px 45px #f04222, 105px 45px #fa5724, 15px 60px #451312, 30px 60px #5a0100, 45px 60px #840e0c, 60px 60px #a51d1a, 75px 60px #ed2805, 90px 60px #d9321e, 105px 60px #f44622, 30px 75px #3b0000, 45px 75px #5d1a1b, 60px 75px #8e1a19, 75px 75px #a80700, 90px 75px #b90a00, 45px 90px #3d0000, 60px 90px #551415, 75px 90px #670100, 60px 105px #340000;
  Animation: Puls 1,2 Sek. Schritte(1) unendlich;
} 

So ist eine Herzform auf Pixelebene fertig. Dann können wir einen Animationseffekt hinzufügen, sodass jede seiner Zellen einen Animationseffekt erzeugt. Sie können es ausprobieren.

Und zum Schluss noch ein herzförmiger CSS-Animationseffekt:

Zusammenfassen

Oben sind drei Methoden zum Zeichnen von Herzformen mit CSS, die ich Ihnen vorgestellt habe. Ich hoffe, sie werden Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!