如何使用 CSS 从正方形动画彩虹心？

在本文中，您将学习如何仅使用 CSS 制作一颗神奇的心。 CSS 中的动画是 CSS 中一个非常吸引人的部分。我们将创建一个每 3 秒改变一次颜色的心形。我们将分两步创建动画。

1. 构建心脏：在这一步中，我们将构建心脏的形状。

首先，我们将在 body 中创建两个分区，分别是square和container类。然后，在style.css文件中，我们将添加一些通用的主体和类样式，以使所有内容居中。然后我们将使用:before和:after选择器创建两个圆，并使用 border-radius属性使其成为一个圆。

这将创建将在下一步中设置动画的心脏形状。下面的代码演示了 HTML 和 CSS 代码。

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

输出：