Эффект бьющегося сердца на CSS

Эффект бьющегося сердца на CSS

Эффект бьющегося сердца на 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, который научит Вас верстать сайты любой сложности и под любые устройств.

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий