Узнайте, как сделать бьющееся сердце с помощью 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;
}