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>

现在，圆圈的颜色已经不同，我们保持这样的方式，这样我们就可以区分圆圈。

现在，我们将对这个心形图案进行动画处理。为此，我们将给心形图案添加运动效果，然后通过使用关键帧属性来改变颜色。每次新的帧出现时，心形的颜色将会改变。

所创建的心形图案的移动将会变为一个正方形，然后再变回心形。我们将使用transform属性来实现这一点，使正方形可以变形成一个心形。现在我们已经讨论完我们的方法。

示例

在以下代码中，我们首先使用了与制作容器和心形图案的代码相同的代码，然后添加了一些关键帧，其中我们从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>

最开始我们的输出是这样的，一个正方形，然后每一帧都会创造一种错觉，仿佛正方形正在变成一个心形，然后在变形之后，它会再次循环回到正方形，并且每一帧的变化会随着颜色的改变而不同。完整的心形会是这样的。

最后，我们可以从一个正方形中看到一个完整的心形。