În fiecare an, pe 14 februarie, mulți oameni schimbă cărți, bomboane, cadouri sau flori cu „Valentine” specială. Ziua romantismului pe care o numim Ziua Îndrăgostiților este numită după un martir creștin și datează din secolul al V-lea, dar are originea în sărbătoarea romană Lupercalia.

Ok până acum, bine. Dar ce poate face un programator pentru Valentine-ul lor?

Răspunsul meu este: folosește CSS și fii creativ!

Îmi place foarte mult CSS. Nu este un limbaj foarte sofisticat (nici măcar nu este considerat un limbaj de programare de cele mai multe ori). Dar cu unele geometrie, matematică și câteva reguli CSS de bază, vă puteți transforma browserul într-o pânză a creativității dvs.!

Asadar, hai sa incepem. Cum ați crea o inimă cu geometrie pură?

Cum sa creati o inima care bate cu CSS pur
O inimă formată dintr-un pătrat și două cercuri

Ai nevoie doar de un pătrat și de două cercuri. Dreapta?

Și o putem desena cu un singur element, datorită ::after și ::before pseudoelemente. Vorbind despre pseudoelemente, ::after este un pseudoelement care vă permite să inserați conținut într-o pagină din CSS (fără a fi nevoie să fie în HTML). ::before este exact la fel, doar că introduce content înainte de orice alt conținut din HTML în loc de după.

Pentru ambele pseudoelemente, rezultatul final nu se află de fapt în DOM, dar apare pe pagină ca și cum ar fi.

Deci, să ne creăm inima.

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

Puteți observa cu ușurință că definim pătratul și poziționarea acestuia utilizând clasa principală „inimă” și cele două cercuri cu ::before și ::after pseudoelemente. Cercurile sunt de fapt doar încă 2 pătrate care au o rază de margine redusă la jumătate.

Dar ce este o inimă fără să bată?

Să creăm un puls. Aici vom folosi regula @keyframes. @Keyframes CSS at-rule este utilizat pentru a defini comportamentul unui ciclu al unei animații CSS.

Când folosim regula cadrelor cheie, putem împărți o perioadă de timp în părți mai mici și putem crea o transformare / animație împărțind-o în pași (fiecare pas corespunde unui procent din finalizarea perioadei de timp).

Deci, să creăm bătăile inimii. Animația noastră de bătăi a inimii constă din 3 pași:

@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. Pe 0% din perioada de timp începem fără transformare.
  2. Pe 20% din perioada de timp ne scalăm forma la 125% din dimensiunea sa inițială.
  3. Pe 40% din perioada de timp ne scalăm forma la 150% din dimensiunea sa inițială.

Pentru restul de 60% din perioada de timp, lăsăm timp pentru ca inima noastră să revină la starea sa inițială.

În cele din urmă, trebuie să atribuim animația inimii noastre.

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

Asta este!

Avem o inimă care bate care va bate pentru totdeauna.
Sau poate atâta timp cât durează propria ta iubire …

Simțiți-vă liber să verificați Codepen-ul aferent:

Vă doresc o zi minunată de Valentine!