Как анимировать радужное сердце из квадрата с помощью CSS?

Опубликовано: 22 Августа, 2022

В этой статье вы узнаете, как сделать волшебное сердце, используя только CSS. Анимации в CSS — увлекательная часть CSS. Мы будем создавать сердце, которое меняет цвет каждые 3 секунды. Мы будем создавать анимацию в два этапа.

1. Построение сердца. На этом этапе мы будем строить форму сердца.

Сначала мы создадим в теле два раздела с классами Square и container . Затем в файле style.css мы добавим некоторые общие стили тела и класса, чтобы центрировать весь контент. Затем мы создадим два круга, используя селекторы :before и : after и используя свойство border-radius , чтобы сделать его кругом.

Это создаст форму сердца, которое будет анимировано на следующем шаге. Код ниже демонстрирует код HTML и CSS.

HTML-файл:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href="style.css" />
</head>
  
<body>
    <div class="container">
        <div class="square"></div>
    </div>
</body>
  
</html>

CSS-файл:

CSS

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
  
.container {
    width: 100vw;
    height: 100vh;
    background-color: black;
    display: grid;
    place-items: center;
    align-items: center;
}
  
.square {
    width: 10rem;
    height: 10rem;
    background-color: orange;
    position: relative;
    transform: rotate(45deg);
}
  
/* Draw one of the circles */
.square::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: green;
    position: absolute;
    border-radius: 50%;
    transform: translateY(-50%);
}
  
/* Draw another of the circles */
.square::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: pink;
    position: absolute;
    border-radius: 50%;
    transform: translateX(-50%);
}

Примечание. На данный момент для рисования кругов используются два разных цвета, чтобы вы могли лучше понять, но в окончательной программе мы возьмем один и тот же цвет для двух кругов и квадрата.

Выход:

Мы можем сделать круги разных цветов, чтобы их было легко различить. Если мы сделаем все цвета одинаковыми, результат будет таким, как показано ниже:

2. Анимация сердца. На этом этапе мы добавляем анимацию сердца.

Мы будем использовать два набора анимации для сердца. Одно — это движение сердца, а другое — изменение цвета. Мы будем использовать ключевые кадры для определения анимации. Цвета сердца будут определены в каждом из ключевых кадров по мере необходимости. Это будет переключать цвета сердца на протяжении всей анимации.

Движение сердца при переходе от квадрата к сердцу можно добавить с помощью свойства трансформации в одном из ключевых кадров. Это вызовет преобразование из квадрата в форму сердца.

Полная программа

HTML

<!DOCTYPE html>
<html>
  
<head>
    <style>
        * {
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
        }
  
        .container {
            width: 100vw;
            height: 100vh;
            background-color: black;
            display: grid;
            place-items: center;
            align-items: center;
        }
  
        .square {
            width: 10rem;
            height: 10rem;
            background-color: pink;
            position: relative;
            transform: rotate(45deg);
            animation: beater 3s linear infinite;
        }
  
        .square::before {
            content: "";
            width: 100%;
            height: 100%;
            background-color: pink;
            position: absolute;
            border-radius: 50%;
            transform: translateY(-50%);
            animation: beater 3s linear infinite;
        }
  
        .square::after {
            content: "";
            width: 100%;
            height: 100%;
            background-color: pink;
            position: absolute;
            border-radius: 50%;
            transform: translateX(-50%);
            animation: beater 3s linear infinite;
        }
  
        /* Define the keyframes for the animation */
        @keyframes beater {
            0% {
                background: red;
            }
  
            15% {
                background: orange;
            }
  
            30% {
                transform: scale(0.5);
                background: yellow;
            }
  
            45% {
                background: greenyellow;
            }
  
            60% {
                background: blue;
            }
  
            75% {
                background: indigo;
            }
  
            100% {
                background: violet;
            }
        }
    </style>
</head>
  
<body>
    <div class="container">
        <div class="square"></div>
    </div>
</body>
  
</html>

Выход:

HTML CSS

Как анимировать радужное сердце из квадрата с помощью CSS?

HTML

CSS

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ