Як створити биття серця за допомогою чистого 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:

Бажаю вам прекрасного дня закоханих!