Узнайте, как сделать бьющееся сердце с помощью CSS. Это удивит женский пол!
@labwebЧтобы создать наше сердце, нам понадобится два круга и квадрат. Мы можем нарисовать это одним элементом, благодаря :after и :before. Before предназначен для создания псевдоэлемента внутри элемента перед его контентом. After аналогичен before с одной лишь разницей, что он создаёт псевдоэлемент внутри элемента после него.
Шаг 1: Добавляем HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="WebLabheart"></div> </body> </html>
Шаг 2: Добавляем CSS, мы определяем квадрат и его расположение, в классе heart и два круга с псевдоэлементами :before и :after. Круги на самом деле представляют собой еще 2 квадрата, радиус границы которых уменьшен до половины
.WebLabheart { 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; } .WebLabheart:before, .WebLabheart:after { content: ""; background-color: red; border-radius: 50%; height: 50px; position: absolute; width: 50px; } .WebLabheart:before { top: -25px; left: 0; } .WebLabheart:after { left: 25px; top: 0; }
Шаг 3: Создаём анимацию, мы будем использовать @keyframes, который используется для определения поведения цикла CSS-анимации. Мы разделяем период времени на более мелкие части и создаем преобразование, разделив его на этапы (каждый шаг соответствует проценту от завершения периода времени). Наша анимация сердцебиения состоит из 2 шагов
@keyframes heartbeat { 0% { transform: scale(1) rotate(-45deg); } 40% { transform: scale(1.3) rotate(-45deg); } }
1) На 0% периода времени мы начинаем без трансформации.
2) На 40% периода времени мы масштабируем нашу форму до 130% от ее первоначального размера.
В остальные 60% времени возвращаем наше сердце в исходное состояние.
Шаг 3: Назначаем анимацию нашему сердцу, для этого добавляем
.WebLabheart { animation: heartbeat 1s infinite; }