持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情
🌈现在是彩虹时间🌈
打开您的样式表并开始输入：
body {
background-color: #f3bbff;
animation: bgColor 50s infinite linear;
margin: 0px;
}
您可以选择任何您喜欢的背景颜色。我选择粉红色是因为它是最好的颜色，很明显。您还可以将边距设置为您想要的任何值。
但是……等一下……
🤔 动画？🤔
CSS 动画是对网页上的对象（或元素）进行动画处理的过程。我们有三大类来执行动画：
变换——变换尺寸、重新缩放对象、将它们从 A 点移动到 B 点等。
过渡——平稳地执行变换。
关键帧- 在给定时间或状态更改动画（属性、值等）。
对于彩虹背景，我们将使用关键帧，因为我们需要在一定时间后将背景颜色更改为另一种颜色。超级简单，相信我。但稍后会详细介绍。
分解我们刚刚写的内容：
bgColor：我们为动画命名，是为了简洁的代码和易于理解。50s：我们为每种颜色设置所需的持续时间。infinite：这使得颜色过渡无限循环，创造了“彩虹效果”。linear：这使颜色过渡平滑，因此颜色“淡入”到彼此。
现在，回到...
🔑关键帧🖼️
关键帧是我们动画的关键帧。它们允许我们构建和定义多组件、多状态动画——从 A 到 B 到 C 到 D 到 E 等等。当我们使用关键帧时，我们可以控制动画的时间：什么时候开始，应该重复多少次，应该持续多长时间。
非常技术性：
关键帧以 0% 的偏移量开始，以 100% 的偏移量结束。% 是动画序列中指定关键帧应出现的时间百分比。
关键帧让我们构建复杂的动画，但实际上，它们一点也不复杂。
让我们为美丽的彩虹循环背景定义关键帧：
@keyframes bgColor {
10% {
background-color: #a43535;
}
20% {
background-color: #ff7b00;
}
30% {
background-color: #ffff51;
}
40% {
background-color: #a7ff4e;
}
50% {
background-color: #7addfe;
}
60% {
background-color: #6b6bfd;
}
70% {
background-color: #ca61ff;
}
80% {
background-color: #ff54af;
}
90% {
background-color: #f3bbff;
}
}
效果如👇
🥳总结
关键帧的范围为 100%，你可以在 100% 范围内将其拆分为任意数量的部分。所以选择你的颜色，将它们分配到你需要的任意百分比（每种颜色 10% 很容易——如果你有勇气，你也可以选择 25%、5% 或 1%……），瞧！
