本文将介绍如何使用纯 CSS 动画创建一个动态的彩虹按钮，并通过少量 JavaScript 代码控制其开启和关闭。这种方法无需复杂的 JavaScript逻辑，即可实现炫酷的视觉效果，并提供灵活的控制方式。
HTML 结构
首先，我们需要一个按钮元素。这里使用 标签，并赋予它一个唯一的 ID，方便后续 JavaScript 代码操作。同时，添加 onclick 事件，当按钮被点击时，调用 toggleLight() 函数。
CSS 样式
接下来，定义按钮的基本样式，以及实现彩虹动画的关键 CSS 代码。
#rainbow-button {
border: none;
border-radius: 8px;
background-color: gray; /* 默认背景色 */
padding: 8px;
cursor: pointer; /* 鼠标悬停时显示手型 */
}
.rainbow-light {
animation: rainbow-animation 2.5s linear infinite;
}
@keyframes rainbow-animation {
0% {
background-color: rgb(255, 0, 0); /* 红色 */
}
8% {
background-color: rgb(255, 127, 0); /* 橙色 */
}
16% {
background-color: rgb(255, 255, 0); /* 黄色 */
}
25% {
background-color: rgb(127, 255, 0); /* 黄绿色 */
}
33% {
background-color: rgb(0, 255, 0); /* 绿色 */
}
41% {
background-color: rgb(0, 255, 127); /* 青绿色 */
}
50% {
background-color: rgb(0, 255, 255); /* 青色 */
}
58% {
background-color: rgb(0, 127, 255); /* 蓝绿色 */
}
66% {
background-color: rgb(0, 0, 255); /* 蓝色 */
}
75% {
background-color: rgb(127, 0, 255); /* 紫色 */
}
83% {
background-color: rgb(255, 0, 255); /* 品红色 */
}
91% {
background-color: rgb(255, 0, 127); /* 玫瑰色 */
}
100% {
background-color: rgb(255, 0, 0); /* 红色 */
}
}- #rainbow-button: 定义按钮的基本样式，包括边框、圆角、背景色和内边距。cursor: pointer 使鼠标悬停在按钮上时显示手型，增加交互性。
- .rainbow-light: 这个类是用来激活彩虹动画的。它将 rainbow-animation 应用于按钮。animation-iteration-count: infinite 确保动画无限循环。
- @keyframes rainbow-animation: 定义了彩虹动画的关键帧。通过改变 background-color 属性，在不同的时间点显示不同的颜色，从而实现彩虹效果。linear 确保颜色过渡平滑。
JavaScript 控制
最后，使用 JavaScript 代码来切换按钮的彩虹效果。
立即学习“Java免费学习笔记（深入）”；
let rainbowButton = document.getElementById("rainbow-button");
function toggleLight() {
if (rainbowButton.classList.contains("rainbow-light")) {
rainbowButton.classList.remove("rainbow-light");
} else {
rainbowButton.classList.add("rainbow-light");
}
}- document.getElementById("rainbow-button"): 获取 HTML 中 ID 为 rainbow-button 的元素。
- toggleLight(): 这个函数用于切换按钮的彩虹效果。它检查按钮是否已经包含 rainbow-light 类。如果包含，则移除该类，停止动画；否则，添加该类，启动动画。
总结
通过以上步骤，我们成功创建了一个使用纯 CSS 动画实现的彩虹按钮，并通过少量 JavaScript 代码实现了对彩虹效果的控制。这种方法简洁高效，易于理解和维护。 你可以根据自己的需求调整动画时长、颜色和按钮样式，创造出更具个性化的效果。
