Sådan oprettes et bankende hjerte med ren CSS til din valentine

Hvert år den 14. februar udveksler mange kort, slik, gaver eller blomster med deres specielle "valentine". Den romantikdag, vi kalder Valentinsdag, er opkaldt efter en kristen martyr og går tilbage til det 5. århundrede, men har sin oprindelse i den romerske ferie Lupercalia.

Ok så langt så godt. Men hvad kan en programmør gøre for deres Valentine?

Mit svar er: Brug CSS og vær kreativ!

Jeg elsker virkelig CSS. Det er ikke et rigtig sofistikeret sprog (det betragtes ikke engang som et programmeringssprog det meste af tiden). Men med nogle geometri, matematik og nogle grundlæggende CSS-regler kan du gøre din browser til et lærred af din kreativitet!

Så lad os starte. Hvordan ville du skabe et hjerte med ren geometri?

Du skal bare bruge en firkant og to cirkler. Ret?

Og vi kan tegne det med et enkelt element takket være elementerne ::afterog ::beforepseudo. At tale om pseudo-elementer ::afterer et pseudo-element, der giver dig mulighed for at indsætte indhold på en side fra CSS (uden at det behøver at være i HTML). ::beforeer nøjagtig den samme, kun den indsætter contentfør noget andet indhold i HTML i stedet for efter.

For begge pseudoelementer er slutresultatet faktisk ikke i DOM, men det ser ud på siden, som om det ville være.

Så lad os skabe vores hjerte.

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

Du kan let bemærke, at vi definerer firkanten og dens placering ved hjælp af hovedklassen 'hjerte' og de to cirkler med ::beforeog ::afterpseudo-elementerne. Cirklerne er faktisk kun 2 flere firkanter, der har deres kantradius reduceret til halvdelen.

Men hvad er et hjerte uden at slå?

Lad os skabe en puls. Her skal vi bruge @keyframes-reglen. @Keyframes CSS-at-rule bruges til at definere adfærd for en cyklus af en CSS-animation.

Når vi bruger keyframes-reglen, kan vi dele en tidsperiode i mindre dele og oprette en transformation / animation ved at opdele den i trin (hvert trin svarer til en procentdel af afslutningen af ​​tidsperioden).

Så lad os skabe hjerteslag. Vores hjerterytme-animation består af 3 trin:

@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. På 0% af tidsperioden starter vi uden transformation.
  2. På 20% af tidsperioden skalerer vi vores form til 125% af dens oprindelige størrelse.
  3. På 40% af tidsperioden skalerer vi vores form til 150% af dens oprindelige størrelse.

I de resterende 60% af tidsperioden giver vi tid til vores hjerte at vende tilbage til dets oprindelige tilstand.

Endelig er vi nødt til at tildele animationen til vores hjerte.

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

Det er det!

Vi har et bankende hjerte, der vil slå for evigt.

Eller måske så længe din egen kærlighed varer ...

Du er velkommen til at tjekke de relaterede Codepen:

Jeg ønsker dig en dejlig Valentinsdag!