Эффект бьющегося сердца на CSS
Доброго времени суток! Сегодня мы рассмотрим с Вами ка можно создать эффект бьющегося сердца средствами CSS-анимации. Итак, код ниже:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Описание анимации*/
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.heartbeat-svg
{
width: 100px;
height: 100px;
animation: heartbeat 1s infinite;
}
body
{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<!-- SVG иконка с CSS классом анимации -->
<svg class="heartbeat-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#ff6b6b">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C15.09 3.81 16.76 3 18.5 3 21.58 3 24 5.42 24 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</body>
</html>
Вот таким простым образом мы создали анимацию бьющегося сердца на чистом CSS. А для тех, кому данная тема интересна у меня есть видеокурс Верстка сайта с нуля 2.0, который научит Вас верстать сайты любой сложности и под любые устройств.
-
Создано 18.01.2024 10:57:31
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.