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

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

花韻仙語

发布： 2025-10-03 20:59:00

原创

1009人浏览过

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

本文将介绍如何使用纯 JavaScript 和 CSS 创建一个彩虹按钮，该按钮颜色会平滑地变化，模拟彩虹 LED 灯的效果。通过 CSS 动画实现彩虹效果，并使用 JavaScript 控制按钮的彩虹效果的开关，无需复杂的 JavaScript 代码即可实现动态的视觉效果。

创建彩虹按钮

以下是如何使用 HTML、CSS 和 JavaScript 创建彩虹按钮的步骤：

1. HTML 结构：

首先，在 HTML 文件中创建一个按钮元素，并为其指定一个唯一的 ID，例如 rainbow-button。同时，添加一个 onclick 事件处理程序，调用 toggleLight() 函数，用于切换彩虹效果。

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

2. CSS 样式：

接下来，使用 CSS 定义按钮的样式。首先，设置按钮的基本样式，例如边框、圆角、背景颜色和内边距。然后，创建一个名为 rainbow-light 的 CSS 类，用于启用彩虹效果。

#rainbow-button {
  border: none;
  border-radius: 8px;
  background-color: gray;
  padding: 8px;
}

.rainbow-light {
  animation: rainbow-animation 2.5s linear infinite; /* 简写形式 */
}

登录后复制

3. CSS 动画：

AppMall应用商店

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

查看详情

使用 @keyframes 规则定义一个名为 rainbow-animation 的 CSS 动画。该动画通过改变 background-color 属性的值，实现彩虹效果。动画的关键帧定义了彩虹的颜色序列，例如红色、橙色、黄色、绿色、青色、蓝色和紫色。

@keyframes rainbow-animation {
  0%, 100% {
    background-color: rgb(255, 0, 0); /* Red */
  }
  8% {
    background-color: rgb(255, 127, 0); /* Orange */
  }
  16% {
    background-color: rgb(255, 255, 0); /* Yellow */
  }
  25% {
    background-color: rgb(127, 255, 0); /* Lime */
  }
  33% {
    background-color: rgb(0, 255, 0); /* Green */
  }
  41% {
    background-color: rgb(0, 255, 127); /* SpringGreen */
  }
  50% {
    background-color: rgb(0, 255, 255); /* Aqua */
  }
  58% {
    background-color: rgb(0, 127, 255); /* DeepSkyBlue */
  }
  66% {
    background-color: rgb(0, 0, 255); /* Blue */
  }
  75% {
    background-color: rgb(127, 0, 255); /* Purple */
  }
  83% {
    background-color: rgb(255, 0, 255); /* Fuchsia */
  }
  91% {
    background-color: rgb(255, 0, 127); /* Rose */
  }
}

登录后复制

4. JavaScript 代码：

最后，使用 JavaScript 定义 toggleLight() 函数，用于切换按钮的彩虹效果。该函数通过检查按钮是否具有 rainbow-light 类来判断彩虹效果是否已启用。如果已启用，则移除该类；否则，添加该类。

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");
  }
}

登录后复制

完整示例：

<!DOCTYPE html>
<html>
<head>
<title>Rainbow Button</title>
<style>
#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%, 100% {
    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);
  }
}
</style>
</head>
<body>

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

<script>
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");
  }
}
</script>

</body>
</html>

登录后复制

注意事项：