Kako stvoriti srce koje kuca čistim CSS-om za svoju Valentinu

Svake godine 14. veljače mnogi ljudi razmjenjuju kartice, bombone, poklone ili cvijeće sa svojim posebnim "valentinom". Dan romantike koji nazivamo Valentinovo nazvan je po kršćanskom mučeniku i datira iz 5. stoljeća, ali porijeklo je iz rimskog praznika Lupercalia.

Ok zasad dobro. Ali što programer može učiniti za svoje Valentinovo?

Moj odgovor je: koristite CSS i budite kreativni!

Stvarno volim CSS. To zapravo nije sofisticirani jezik (većinu se vremena niti ne smatra programskim jezikom). Ali uz malo geometrije, matematike i nekih osnovnih CSS pravila, možete svoj preglednik pretvoriti u platno svoje kreativnosti!

Pa krenimo. Kako biste stvorili srce s čistom geometrijom?

Trebate samo kvadrat i dva kruga. Pravo?

A to možemo nacrtati jednim elementom, zahvaljujući ::afteri ::beforepseudo elementima. Govoreći o pseudo elementima, ::afterpseudo je element koji vam omogućuje umetanje sadržaja na stranicu iz CSS-a (bez potrebe da bude u HTML-u). ::beforeje potpuno isti, samo što umeće contentprije nego bilo koji drugi sadržaj u HTML, umjesto nakon.

Za oba pseudo elementa konačni rezultat zapravo nije u DOM-u, ali na stranici se pojavljuje kao da bi bio.

Pa kreirajmo svoje srce.

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

Lako možete primijetiti da kvadrat definiramo i njegovo pozicioniranje pomoću glavne klase 'srce' i dva kruga s ::beforei ::afterpseudo elementima. Kružnice su zapravo samo još dva kvadrata kojima je radijus obruba smanjen na polovicu.

Ali što je srce bez kucanja?

Stvorimo puls. Ovdje ćemo koristiti pravilo @keyframes. CSS-pravilo @keyframes koristi se za definiranje ponašanja jednog ciklusa CSS animacije.

Kada koristimo pravilo ključnih okvira, vremensko razdoblje možemo podijeliti na manje dijelove i stvoriti transformaciju / animaciju dijeljenjem u korake (svaki korak odgovara postotku završetka vremenskog razdoblja).

Pa kreirajmo otkucaje srca. Naša animacija otkucaja srca sastoji se od 3 koraka:

@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. U 0% vremenskog razdoblja započinjemo bez transformacije.
  2. U 20% vremenskog razdoblja svoj oblik mjerimo na 125% njegove početne veličine.
  3. U 40% vremenskog razdoblja svoj oblik skaliramo na 150% njegove početne veličine.

Preostalih 60% vremenskog razdoblja ostavljamo vremenu da se srce vrati u početno stanje.

Napokon animaciju moramo dodijeliti svom srcu.

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

To je to!

Imamo kucajuće srce koje će kucati zauvijek.

Ili možda dok traje vaša vlastita ljubav ...

Slobodno pogledajte povezani Codepen:

Želim vam divno Valentinovo!