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

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

心靈之曲

发布： 2025-10-03 19:52:02

原创

224人浏览过

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

本文将介绍如何使用纯 JavaScript 和 CSS 创建一个动态的彩虹按钮，无需依赖任何外部库。通过 CSS 动画实现颜色平滑过渡，并使用 JavaScript 控制彩虹效果的开启和关闭，最终实现一个可交互的彩虹按钮。

HTML 结构

首先，我们需要在 HTML 中创建一个按钮元素，并赋予它一个唯一的 ID，以便 JavaScript 可以访问它。

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

登录后复制

在这个例子中，我们创建了一个 input 类型的按钮，ID 为 "rainbow-button"，并绑定了一个 onclick 事件，当按钮被点击时，会调用 toggleLight() 函数。

CSS 样式

接下来，我们需要使用 CSS 来定义按钮的样式和彩虹动画。

AppMall应用商店

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

查看详情

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

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

.rainbow-light {
  animation: rainbow-animation 2.5s linear;
  animation-iteration-count: infinite;
}

@keyframes rainbow-animation {
  100%, 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);
  }
}

登录后复制

#rainbow-button 定义了按钮的基本样式，例如边框、圆角、背景颜色和内边距。
.rainbow-light 类定义了彩虹动画。animation 属性指定了动画的名称、持续时间、速度曲线和循环次数。
@keyframes rainbow-animation 定义了彩虹动画的关键帧。每个关键帧指定了在特定时间点的背景颜色。

JavaScript 控制

最后，我们需要使用 JavaScript 来控制彩虹效果的开启和关闭。

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

登录后复制