我们可以使用 HTML、CSS 和 JavaScript 一起制作动画，并可以在网页或网站上实现这些动画。 CSS 提供了许多我们可以用来创建动画的属性，这就是为什么建议使用 CSS 进行样式设计，因为它为前端开发提供了强大的功能。
在本文中，我们将使用 CSS 创建一个每 3 秒改变颜色的心形，并使用一些动画分两步完成。
创建彩虹心的步骤
我们将为主体创建两个不同的部分，然后创建两个类，其中一个是正方形，另一个是容器。我们还将创建 CSS 部分，在其中向正文添加一些属性，然后将要显示的所有内容居中。我们将使用以下代码创建容器。
示例
在下面的示例中，我们添加了一些属性并创建了动画将在其中播放的心形。下面的代码给出了 HTML 和 CSS 代码的输出。
立即学习“前端免费学习笔记（深入）”；
Creating the container .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%; }
圆圈现在具有不同的颜色，我们保持这种方式以便我们可以区分圆圈。
现在，我们将为这颗心设置动画。为此，我们将为心脏添加运动，然后使用关键帧属性更改颜色。每次出现新的框架时，心形的颜色都会改变。
所创造的心的运动会改变形成一个正方形，然后再变回形成一个心。我们将通过使用变换属性来做到这一点，以便正方形可以转变为心形。现在我们已经讨论完了该方法。
示例
在下面的代码中，我们首先使用与制作容器和心形形状相同的代码，然后添加一些关键帧，在其中设置从 0% 到 100% 的颜色。每个关键帧的颜色都会发生变化，使得正方形看起来像是变成了心形。让我们看一下输出，以便我们了解使用代码后发生了什么。
Creating the container .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; } }
最初我们的输出看起来像这样，一个正方形，然后在每一帧中它都会产生一种错觉，即正方形正在转变成心形，然后在转换后它会再次循环并变成一个正方形，每帧都会变成不同的颜色框架的改变。完整的心脏看起来像这样。
最后，我们可以从正方形中看到一颗完整的心。
结论
如今，网站中的动画非常常见，这些动画决定了网站的实际外观和感觉。这些动画的目的通常是吸引用户或让用户轻松理解某些内容。 CSS 是一个非常强大的工具，只需几行代码就可以创建这些动画。动画包含它们之间的帧，我们使用 CSS 中的关键帧属性来更改帧。
在本文中，我们学习了如何使用每 3 秒改变一次颜色的 CSS 从正方形创建动画彩虹心。
以上就是使用 CSS 从正方形制作彩虹心动画？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625731.html
微信扫一扫 
支付宝扫一扫 
