Comment créer un cœur qui bat avec du CSS pur pour votre Saint-Valentin

Chaque année, le 14 février, de nombreuses personnes échangent des cartes, des bonbons, des cadeaux ou des fleurs avec leur «Saint-Valentin» spéciale. Le jour de la romance que nous appelons la Saint-Valentin porte le nom d'un martyr chrétien et remonte au 5ème siècle, mais a ses origines dans la fête romaine Lupercalia.

Ok jusqu'ici tout va bien. Mais que peut faire un programmeur pour sa Saint-Valentin?

Ma réponse est: utilisez CSS et soyez créatif!

J'adore vraiment CSS. Ce n'est pas un langage vraiment sophistiqué (il n'est même pas considéré comme un langage de programmation la plupart du temps). Mais avec de la géométrie, des mathématiques et quelques règles CSS de base, vous pouvez transformer votre navigateur en une toile de votre créativité!

Alors commençons. Comment créerais-tu un cœur avec une géométrie pure?

Vous avez juste besoin d'un carré et de deux cercles. Droite?

Et nous pouvons dessiner cela avec un seul élément, grâce aux ::afteret ::beforepseudo éléments. Parlant de pseudo éléments, ::afterest un pseudo élément qui vous permet d'insérer du contenu dans une page à partir de CSS (sans qu'il soit nécessaire qu'il soit dans le HTML). ::beforeest exactement le même, mais il insère l' contentavant tout autre contenu dans le HTML au lieu de l'après.

Pour les deux pseudo éléments, le résultat final n'est pas réellement dans le DOM, mais il apparaît sur la page comme s'il le serait.

Alors créons notre cœur.

.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; }

Vous pouvez facilement remarquer que nous définissons la place et son positionnement en utilisant la classe principale « cœur » et les deux cercles avec les ::beforeet ::afteréléments pseudo. Les cercles ne sont en fait que 2 autres carrés dont le rayon de bordure est réduit de moitié.

Mais qu'est-ce qu'un cœur sans battre?

Créons une impulsion. Ici, nous allons utiliser la règle @keyframes. La règle @keyframes CSS at est utilisée pour définir le comportement d'un cycle d'une animation CSS.

Lorsque nous utilisons la règle des images clés, nous pouvons diviser une période de temps en parties plus petites et créer une transformation / animation en la divisant en étapes (chaque étape correspond à un pourcentage de l'achèvement de la période).

Alors créons le rythme cardiaque. Notre animation Heartbeat se compose de 3 étapes:

@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. Sur 0% de la période de temps, nous commençons sans transformation.
  2. Sur 20% de la période, nous redimensionnons notre forme à 125% de sa taille initiale.
  3. Sur 40% de la période, nous redimensionnons notre forme à 150% de sa taille initiale.

Pour les 60% restants de la période, nous laissons le temps à notre cœur de revenir à son état initial.

Enfin, nous devons attribuer l'animation à notre cœur.

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

C'est ça!

Nous avons un cœur qui bat à jamais.

Ou peut-être aussi longtemps que votre propre amour dure…

N'hésitez pas à consulter le Codepen associé:

Je vous souhaite une merveilleuse Saint-Valentin!