Бьющееся сердце для любимой на CSS.
@labweb
Чтобы создать наше сердце, нам понадобится два круга и квадрат. Мы можем нарисовать это одним элементом, благодаря :after и :before. Before предназначен для создания псевдоэлемента внутри элемента перед его контентом. After аналогичен before с одной лишь разницей, что он создаёт псевдоэлемент внутри элемента после него.
Создаем сердце:
ШАГ 1
Добавляем HTML:
ШАГ 2
Добавляем CSS, мы определяем квадрат и его расположение, в классе heart и два круга с псевдоэлементами :before и :after. Круги на самом деле представляют собой еще 2 квадрата, радиус границы которых уменьшен до половины.
ШАГ 3
Создаём анимацию, мы будем использовать @keyframes, который используется для определения поведения цикла CSS-анимации. Мы разделяем период времени на более мелкие части и создаем преобразование, разделив его на этапы (каждый шаг соответствует проценту от завершения периода времени). Наша анимация сердцебиения состоит из 2 шагов:
1) На 0% периода времени мы начинаем без трансформации.
2) На 40% периода времени мы масштабируем нашу форму до 130% от ее первоначального размера.
В остальные 60% времени возвращаем наше сердце в исходное состояние.
ШАГ 4
Назначаем анимацию нашему сердцу, для этого добавляем:
.WebLabheart {
animation: heartbeat 1s infinite;
}