使用纯 CSS 和少量 JavaScript 创建彩虹按钮-js教程-PHP中文网

使用纯 CSS 和少量 JavaScript 创建彩虹按钮

碧海醫心

发布： 2025-10-03 20:27:01

原创

534人浏览过

使用纯 css 和少量 javascript 创建彩虹按钮

本文将介绍如何使用纯 CSS 动画创建一个动态的彩虹按钮，并通过少量 JavaScript 代码控制其开启和关闭。这种方法无需复杂的 JavaScript逻辑，即可实现炫酷的视觉效果，并提供灵活的控制方式。

HTML 结构

首先，我们需要一个按钮元素。这里使用 <input> 标签，并赋予它一个唯一的 ID，方便后续 JavaScript 代码操作。同时，添加 onclick 事件，当按钮被点击时，调用 toggleLight() 函数。

<input id="rainbow-button" type="button" onclick="toggleLight()" value="Rainbow button">

登录后复制

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 代码来切换按钮的彩虹效果。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

立即学习“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 类。如果包含，则移除该类，停止动画；否则，添加该类，启动动画。