如何使用 CSS 将正方形动画变为彩虹心形?

cssweb developmentfront end technology更新于 2024/10/31 21:00:17

我们可以结合使用 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>

最初，我们的输出看起来像这样，一个正方形，然后随着每一帧的变化，它会营造出一种正方形变成心形的幻觉，变换之后，它会再次循环，变成一个正方形，并且随着每一帧的变化而变化颜色。完整的心形看起来就像这样。

最后，我们可以看到正方形变成了一颗完整的心形。