Всяка година на 14 февруари много хора си разменят картички, бонбони, подаръци или цветя с техните специални „валентинки“. Денят на романтиката, който наричаме Свети Валентин, е кръстен на християнски мъченик и датира от 5 век, но произхожда от римския празник Луперкалия.
Добре, засега добре. Но какво може да направи програмист за техния Валентин?
Моят отговор е: използвайте CSS и бъдете креативни!
Наистина обичам CSS. Това не е наистина сложен език (през повечето време дори не се счита за език за програмиране). Но с някои геометрия, математика и някои основни CSS правила, можете да превърнете браузъра си в платно на вашето творчество!
Така че нека започнем. Как бихте създали сърце с чиста геометрия?
Трябва ви само квадрат и два кръга. Нали?
И можем да го нарисуваме с един елемент, благодарение на ::afterи ::beforeпсевдоелементите. Говорейки за псевдоелементи, ::afterе псевдо елемент, който ви позволява да вмъквате съдържание в страница от CSS (без да е необходимо да е в HTML). ::beforeе абсолютно същото, само че вмъква contentпреди всяко друго съдържание в HTML вместо след.
И за двата псевдоелемента крайният резултат всъщност не е в DOM, но се появява на страницата сякаш би бил.
Така че нека създадем сърцето си.
.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; }Можете лесно да забележите, че ние дефинираме квадрата и неговото позициониране, като използваме основния клас "сърце" и двата кръга с ::beforeи ::afterпсевдо елементите. Кръговете всъщност са само още 2 квадрата, чийто радиус на границата е намален до половината.
Но какво е сърце, без да бие?
Нека създадем импулс. Тук ще използваме правилото @keyframes. Правилото за CSS @keyframes се използва за определяне на поведението на един цикъл на CSS анимация.
Когато използваме правилото за ключовите кадри, можем да разделим период от време на по-малки части и да създадем трансформация / анимация, като го разделим на стъпки (всяка стъпка съответства на процент от завършването на периода от време).
Така че нека създадем сърдечния ритъм. Нашата анимация на сърдечния ритъм се състои от 3 стъпки:
@keyframes heartbeat { 0% { transform: scale( 1 ); } 20% { transform: scale( 1.25 ) translateX(5%) translateY(5%); } 40% { transform: scale( 1.5 ) translateX(9%) translateY(10%); } }- На 0% от периода от време започваме без трансформация.
- На 20% от периода от време ние мащабираме формата си до 125% от първоначалния й размер.
- В 40% от периода от време ние мащабираме формата си до 150% от първоначалния й размер.
През останалите 60% от периода от време оставяме време сърцето ни да се върне в първоначалното си състояние.
Накрая трябва да присвоим анимацията на сърцето си.
.heart { animation: heartbeat 1s infinite; // our heart has infinite heartbeat :) ... }Това е!
Имаме биещо сърце, което ще бие вечно.
Или може би докато трае вашата собствена любов ...
Чувствайте се свободни да разгледате свързания Codepen:
Желая ви прекрасен ден на влюбените!