Kuidas luua valentinile puhta CSS-iga pekslev süda

Igal aastal 14. veebruaril vahetavad paljud inimesed oma erilise “valentiniga” kaarte, komme, kingitusi või lilli. Romantikapäev, mida kutsume sõbrapäevaks, on nimetatud kristlasest märtrile ja see pärineb 5. sajandist, kuid pärineb Rooma pühalt Lupercalia.

Ok seni nii hea. Kuid mida saab programmeerija oma Valentine'i heaks teha?

Minu vastus on: kasuta CSS-i ja ole loov!

Ma tõesti armastan CSS-i. See pole tegelikult keeruline keel (seda ei peeta enamasti isegi programmeerimiskeeleks). Kuid mõne geomeetria, matemaatika ja mõnede CSS-i põhireeglite abil saate oma brauseri muuta oma loovuse lõuendiks!

Nii et alustame. Kuidas saaksite luua puhta geomeetriaga südame?

Teil on vaja lihtsalt ruutu ja kahte ringi. Eks?

Ja selle saame joonistada ühe elemendiga, tänu ::afterja ::beforepseudoelementidele. Pseudoelementidest rääkides ::afteron pseudoelement, mis võimaldab teil CSS-i lehele sisu lisada (ilma et see peaks HTML-is olema). ::beforeon täpselt sama, ainult see lisab contentenne muud sisu HTML-i pärast selle asemel.

Mõlema pseudoelemendi puhul ei ole lõpptulemus tegelikult DOM-is, kuid see ilmub lehel nagu oleks.

Nii et loome oma südame.

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

Saate hõlpsasti teada, et me defineerime ruudu ja selle positsioneerimise abil peamine südame-klassi ja kaks ringi koos ::beforeja ::afterpseudo elemente. Ringid on tegelikult veel vaid 2 ruutu, mille piiri raadius on vähendatud poole võrra.

Aga mis on süda ilma löömata?

Loome pulsi. Siin kasutame reeglit @keyframes. @Keyframes CSS-reeglit kasutatakse CSS-i animatsiooni ühe tsükli käitumise määratlemiseks.

Võtmekaadrireeglit kasutades saame jagada ajavahemiku väiksemateks osadeks ja luua teisenduse / animatsiooni, jagades selle sammudeks (iga samm vastab protsendile ajaperioodi lõpuleviimisest).

Nii et loome südamelöögid. Meie südamelöökide animatsioon koosneb kolmest etapist:

@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. 0% ajavahemikust alustame ilma muutusteta.
  2. 20% ajavahemikust muudame oma kuju 125% -ni selle esialgsest suurusest.
  3. 40% ajavahemikust muudame oma kuju 150% -ni selle esialgsest suurusest.

Ülejäänud 60% ajavahemikust jätame südamele aega algsesse seisundisse naasmiseks.

Lõpuks peame animatsiooni südamele määrama.

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

See selleks!

Meil on peksev süda, mis lööb igavesti.

Või võib-olla nii kaua, kuni teie enda armastus kestab ...

Tutvuge julgelt seotud Codepeniga:

Soovin teile imelist sõbrapäeva!