Как да създадете биещо сърце с чист CSS за вашата валентина

Всяка година на 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%); } }
  1. На 0% от периода от време започваме без трансформация.
  2. На 20% от периода от време ние мащабираме формата си до 125% от първоначалния й размер.
  3. В 40% от периода от време ние мащабираме формата си до 150% от първоначалния й размер.

През останалите 60% от периода от време оставяме време сърцето ни да се върне в първоначалното си състояние.

Накрая трябва да присвоим анимацията на сърцето си.

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

Това е!

Имаме биещо сърце, което ще бие вечно.

Или може би докато трае вашата собствена любов ...

Чувствайте се свободни да разгледате свързания Codepen:

Желая ви прекрасен ден на влюбените!