So erstellen Sie mit reinem CSS ein schlagendes Herz für Ihren Valentinstag

Jedes Jahr am 14. Februar tauschen viele Menschen Karten, Süßigkeiten, Geschenke oder Blumen mit ihrem besonderen „Valentinstag“ aus. Der Tag der Romantik, den wir Valentinstag nennen, ist nach einem christlichen Märtyrer benannt und stammt aus dem 5. Jahrhundert, hat aber seinen Ursprung im römischen Feiertag Lupercalia.

Ok so weit so gut. Aber was kann ein Programmierer für seinen Valentinstag tun?

Meine Antwort lautet: Verwenden Sie CSS und seien Sie kreativ!

Ich liebe CSS wirklich. Es ist keine wirklich hoch entwickelte Sprache (es wird die meiste Zeit nicht einmal als Programmiersprache angesehen). Mit etwas Geometrie, Mathematik und einigen grundlegenden CSS-Regeln können Sie Ihren Browser in eine Leinwand Ihrer Kreativität verwandeln!

So lass uns anfangen. Wie würden Sie ein Herz mit reiner Geometrie erschaffen?

Sie brauchen nur ein Quadrat und zwei Kreise. Richtig?

Und das können wir dank der ::afterund ::beforePseudo-Elemente mit einem einzigen Element zeichnen . Bei Pseudoelementen ::afterhandelt es sich um ein Pseudoelement, mit dem Sie Inhalte aus CSS in eine Seite einfügen können (ohne dass diese im HTML-Code enthalten sein müssen). ::beforeist genau das gleiche, nur fügt es das contentvor jedem anderen Inhalt in den HTML-Code ein, anstatt nachher.

Für beide Pseudoelemente befindet sich das Endergebnis nicht im DOM, sondern erscheint auf der Seite so, als ob es wäre.

Also lasst uns unser Herz erschaffen.

.heart { background-color: red; display: inline-block; height: 50px; margin: 0 10px; position: relative; top: 0; transform: rotate(-45deg); position: absolute; left: 45%; top: 45%; width: 50px; } .heart:before, .heart:after { content: ""; background-color: red; border-radius: 50%; height: 50px; position: absolute; width: 50px; } .heart:before { top: -25px; left: 0; } .heart:after { left: 25px; top: 0; }

Sie können leicht feststellen, dass wir das Quadrat und seine Positionierung definieren, indem wir die Hauptklasse 'Herz' und die beiden Kreise mit den Elementen ::beforeund ::afterPseudo verwenden. Die Kreise sind eigentlich nur zwei weitere Quadrate, deren Randradius auf die Hälfte reduziert ist.

Aber was ist ein Herz ohne zu schlagen?

Lassen Sie uns einen Puls erzeugen. Hier verwenden wir die @ keyframes-Regel. Die @ keyframes CSS-Regel wird verwendet, um das Verhalten eines Zyklus einer CSS-Animation zu definieren.

Wenn wir die Keyframes-Regel verwenden, können wir einen Zeitraum in kleinere Teile unterteilen und eine Transformation / Animation erstellen, indem wir sie in Schritte aufteilen (jeder Schritt entspricht einem Prozentsatz des Abschlusses des Zeitraums).

Also lasst uns den Herzschlag erzeugen. Unsere Herzschlaganimation besteht aus 3 Schritten:

@keyframes heartbeat { 0% { transform: scale( 1 ); } 20% { transform: scale( 1.25 ) translateX(5%) translateY(5%); } 40% { transform: scale( 1.5 ) translateX(9%) translateY(10%); } }
  1. In 0% des Zeitraums beginnen wir ohne Transformation.
  2. In 20% des Zeitraums skalieren wir unsere Form auf 125% ihrer ursprünglichen Größe.
  3. In 40% des Zeitraums skalieren wir unsere Form auf 150% ihrer ursprünglichen Größe.

Für die verbleibenden 60% des Zeitraums lassen wir Zeit, damit unser Herz in seinen Ausgangszustand zurückkehrt.

Schließlich müssen wir die Animation unserem Herzen zuweisen.

.heart { animation: heartbeat 1s infinite; // our heart has infinite heartbeat :) ... }

Das ist es!

Wir haben ein schlagendes Herz, das für immer schlagen wird.

Oder vielleicht solange deine eigene Liebe anhält ...

Schauen Sie sich den zugehörigen Codepen an:

Ich wünsche Ihnen einen schönen Valentinstag!