Kuinka luoda sykkivä sydän puhtaalla CSS: llä valentineesi

Joka vuosi 14. helmikuuta monet ihmiset vaihtavat kortteja, karkkeja, lahjoja tai kukkia erityisellä "ystävänsä" kanssa. Romanttinen päivä, jota kutsumme ystävänpäiväksi, on nimetty kristilliselle marttyyrille ja se on peräisin 5. vuosisadalta, mutta se on peräisin Rooman lomasta Lupercalia.

Ok toistaiseksi niin hyvä. Mutta mitä ohjelmoija voi tehdä ystävänsä hyväksi?

Vastaukseni on: käytä CSS: ää ja ole luova!

Rakastan todella CSS: ää. Se ei ole todella hienostunut kieli (sitä ei edes pidetä ohjelmointikielenä suurimman osan ajasta). Mutta joidenkin geometrian, matematiikan ja joidenkin CSS-perussääntöjen avulla voit muuttaa selaimesi luovuuden kankaaksi!

Joten aloitetaan. Kuinka luisit sydämen puhtaalla geometrialla?

Tarvitset vain neliön ja kaksi ympyrää. Eikö?

Ja voimme piirtää sen yhdellä elementillä, ::afterja ::beforepseudoelementtien ansiosta . Pseudoelementeistä puhuminen ::afteron pseudoelementti, jonka avulla voit lisätä sisältöä sivulle CSS: stä (ilman että sen tarvitsee olla HTML-muodossa). ::beforeon täsmälleen sama, vain se lisää contentennen muuta sisältöä HTML-koodiin sen jälkeen, kun se on.

Molempien näennäiselementtien lopputulos ei ole oikeastaan ​​DOM: ssä, mutta se näkyy sivulla ikään kuin se olisi.

Luodaan siis sydämemme.

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

Voit helposti huomata, että määritämme neliön ja sen sijainnin käyttämällä pää sydänluokkaa ja kahta ympyrää ::beforesekä ::afterpseudoelementeillä. Ympyrät ovat oikeastaan ​​vain 2 muuta neliötä, joiden raja-säde on pienennetty puoleen.

Mutta mikä on sydän lyömättä?

Luodaan pulssi. Täällä aiomme käyttää @keyframes-sääntöä. @Keyframes CSS -sääntöä käytetään määrittämään CSS-animaation yhden syklin käyttäytyminen.

Kun käytämme avainkehyssääntöä, voimme jakaa ajanjakson pienempiin osiin ja luoda muunnoksen / animaation jakamalla sen vaiheiksi (jokainen vaihe vastaa prosenttiosuutta ajanjakson päättymisestä).

Joten luodaan syke. Syke-animaatiomme koostuu 3 vaiheesta:

@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% ajanjaksosta aloitamme ilman muutosta.
  2. 20% ajanjaksosta skaalamme muodomme 125%: iin sen alkuperäisestä koosta.
  3. 40% ajanjaksosta skaalamme muodomme 150%: iin sen alkuperäisestä koosta.

Jäämme jäljellä olevalle 60 prosentille ajanjaksosta sydämemme palata alkuperäiseen tilaansa.

Lopuksi meidän on osoitettava animaatio sydämellemme.

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

Se siitä!

Meillä on sykkivä sydän, joka lyö ikuisesti.

Tai ehkä niin kauan kuin oma rakkautesi kestää ...

Voit vapaasti tarkistaa asiaan liittyvän Codepenin:

Toivotan teille upeaa ystävänpäivää!