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>
最初,我们的输出看起来是这样的,一个正方形,然后每一帧都会产生一个错觉,即正方形正在转变为一个心脏,然后在转变之后,它会再次循环,成为一个正方形,在每一帧的变化中变成不同的颜色。完整的心形看起来会是这样的。
最后,我们可以从一个正方形看到一个完整的心脏。
结论
如今,网站中的动画非常普遍,这些动画对网站的实际外观和感觉负责。这些动画的目的通常是为了吸引用户或使用户容易理解一些东西。CSS是一个非常强大的工具,只需几行代码就可以创建这些动画。动画之间包含框架,我们使用CSS中的关键帧属性来改变这些框架。
在这篇文章中,我们学习了如何使用CSS从一个正方形创建一个动画彩虹心,每3秒改变一次颜色。