数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 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>
现在，圆圈的颜色各不相同，我们保持这种方式以便区分它们。
现在，我们将为这个心形添加动画。为此，我们将为心形添加运动，然后使用 `keyframes` 属性更改颜色。每次出现新帧时，心形颜色都会发生变化。
创建的心形将发生变化，形成一个正方形，然后再次变回心形。我们将通过使用 `transform` 属性来实现，以便正方形可以转换为心形。现在我们已经讨论了方法。
示例
在以下代码中，我们首先使用了与创建容器和心形相同的代码，然后添加了一些 `keyframes`，在其中我们从 0% 到 100% 设置颜色。每个 `keyframes` 中的颜色都会发生变化，这使得它看起来像正方形正在转换为心形。让我们看看输出结果，以便我们了解使用代码后发生了什么。
<!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>
最初，我们的输出看起来像这样，一个正方形，然后在每一帧中，它会产生一种错觉，即正方形正在转换为心形，然后在转换后，它将循环回正方形，并在每一帧变化时变成不同的颜色。完整的心形看起来像这样。
最后，我们可以看到一个完整的从正方形变换而来的心形。
结论
如今，网站动画非常普遍，这些动画决定了网站的实际外观和感觉。这些动画的目的通常是吸引用户或使用户更容易理解某些内容。CSS 是一种非常强大的工具，只需几行代码即可创建这些动画。动画包含帧，我们使用 CSS 中的 `keyframes` 属性来修改帧。
在本文中，我们学习了如何使用 CSS 创建一个动画的彩虹心形，它每 3 秒改变一次颜色。
329 次浏览
