CSS 从一个正方形中制作一个彩虹心的动画

我们可以使用HTML、CSS和JavaScript一起做动画，并可以在网页或网站上实现这些动画。CSS提供了很多属性，我们可以用来创建动画，这就是为什么建议使用CSS来做造型，因为它对前端开发有很大的帮助。

在这篇文章中，我们将使用CSS创建一个每3秒改变颜色的心脏，它将使用一些动画分两步完成。

制作彩虹心的步骤

我们将为主体创建两个不同的分区，然后创建两个类，其中一个是方形，另一个是容器。我们还将创建CSS部分，在其中我们将为主体添加一些属性，然后将所有要显示的内容居中。我们将使用以下代码来创建容器。

示例

在下面的例子中，我们添加了一些属性并创建了心脏的形状，我们的动画将在其中播放。下面的代码给出了HTML和CSS代码的输出。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creating the container</title>
   <style>
      .contain {
         display: grid;
         height: 99vh;
         place-items: center;
      }
      .sqr {
         height: 9rem;
         width: 9rem;
         background-color: blue;
         transform: rotate(45deg);
      }
      .sqr::before {
         content: "";
         height: 100%;
         width: 99%;
         background-color: red;
         position: absolute;
         transform: translateY(-50%);
         border-radius: 49%;
      }
      .sqr::after {
         content: "";
         background-color: lightgreen;
         position: absolute;
         width: 99%;
         height: 99%;
         transform: translateX(-49%);
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <div class="contain">
      <div class="sqr"></div>
   </div>
</body>
</html>

现在的圆圈是不同的颜色，我们保持这种方式，以便我们能够区分不同的圆圈。

现在，我们将为这个心脏制作动画。为此，我们将为心脏添加动作，然后我们将通过使用关键帧属性来改变颜色。每次出现新的帧时，心脏的颜色就会改变。

创建的心形的运动将改变，形成一个正方形，然后再变回来形成一个心形。这一点，我们将通过使用变换属性来实现，这样，正方形就可以变换成心形。现在，我们已经完成了对方法的讨论。

示例

在下面的代码中，我们首先使用了与制作容器和心脏形状相同的代码，然后添加了一些关键帧，在其中我们设置了从0%到100%的颜色。在每一个关键帧中，颜色都会发生变化，这使它看起来像正方形变成了心脏。让我们看看输出结果，这样我们就能理解在我们使用该代码后发生了什么。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creating the container</title>
   <style>
      .contain {
         display: grid;
         height: 99vh;
         place-items: center;
      }
      .sqr {
         height: 9rem;
         width: 9rem;
         background-color: grey;
         transform: rotate(45deg);
         animation: beater 3s linear infinite;
      }
      .sqr::before {
         content: "";
         height: 100%;
         width: 99%;
         background-color: maroon;
         position: absolute;
         transform: translateY(-50%);
         border-radius: 49%;
         animation: beater 3s linear infinite;
      }
      .sqr::after {
         content: "";
         background-color: yellow;
         position: absolute;
         width: 99%;
         height: 99%;
         transform: translateX(-49%);
         border-radius: 50%;
         animation: beater 3s linear infinite;
      }
      @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="contain">
      <div class="sqr"></div>
   </div>
</body>
</html>