Minden évben február 14-én sokan cserélnek kártyákat, cukorkákat, ajándékokat vagy virágokat különleges „valentinjükkel”. A romantika napját, amelyet Valentin-napnak hívunk, keresztény vértanúról nevezték el, és az 5. századra nyúlik vissza, de a római Lupercalia ünnepre vezethető vissza.
Oké eddig nagyon jó. De mit tehet egy programozó a Valentine-ért?
A válaszom: használd a CSS-t és légy kreatív!
Nagyon szeretem a CSS-t. Ez nem igazán kifinomult nyelv (a legtöbbször még programozási nyelvnek sem tekinthető). De bizonyos geometria, matematika és néhány alapvető CSS-szabály segítségével a böngészőt kreativitásának vásznává varázsolhatja!
Kezdjük hát. Hogyan hozhatna létre tiszta szív geometriájú szívet?
Csak négyzetre és két körre van szüksége. Jobb?
És ezt egyetlen elemmel megrajzolhatjuk, az ::afterés ::beforeálelemeknek köszönhetően . Pszeudo elemekről szólva, ::afterez egy olyan pszeudo elem, amely lehetővé teszi, hogy tartalmat illesszen be egy oldalba a CSS-ből (anélkül, hogy a HTML-ben kellene lennie). ::beforepontosan megegyezik, csak az contentutána beilleszt minden más tartalmat a HTML-be.
Mindkét álelem esetében a végeredmény valójában nincs a DOM-ban, de úgy jelenik meg az oldalon, mintha az lenne.
Teremtsük hát meg a szívünket.
.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; }Könnyedén észreveheti, hogy a négyzetet és annak elhelyezkedését meghatározzuk a fő 'szív' osztály és a két kör, ::beforevalamint az ::afterpszeudo elemekkel. A körök valójában csak további 2 négyzet, amelyek határsugara felére csökken.
De mi a szív dobogás nélkül?
Hozzunk létre egy impulzust. Itt a @keyframes szabályt fogjuk használni. Az @keyframes CSS at-szabály a CSS animáció egy ciklusának viselkedését határozza meg.
Amikor a kulcsképek szabályt használjuk, feloszthatunk egy időszakot kisebb részekre, és átalakításokat / animációkat hozhatunk létre szakaszokra bontva (mindegyik lépés az adott időszak teljes százalékának felel meg).
Hozzuk létre hát a szívverést. A szívverés animációnk 3 lépésből áll:
@keyframes heartbeat { 0% { transform: scale( 1 ); } 20% { transform: scale( 1.25 ) translateX(5%) translateY(5%); } 40% { transform: scale( 1.5 ) translateX(9%) translateY(10%); } }- Az idő 0% -án nem indulunk el átalakulás nélkül.
- Az időtartam 20% -án az alakját a kezdeti méret 125% -ára méretezzük.
- Az időtartam 40% -án alakunkat a kezdeti méret 150% -ára méretezzük.
Az idő fennmaradó 60% -ában időt hagyunk arra, hogy szívünk visszatérjen eredeti állapotához.
Végül az animációt kell a szívünkhöz rendelnünk.
.heart { animation: heartbeat 1s infinite; // our heart has infinite heartbeat :) ... }Ez az!
Dobogó szívünk van, amely örökké dobog.
Vagy talán addig, amíg a saját szerelmed tart ...
Nézze meg nyugodtan a kapcsolódó Codepent:
Csodálatos Valentin napot kívánok!