当前位置：首页 > JavaScript

用js实现渐变颜色转变

2026-01-31 05:35:10JavaScript

实现渐变颜色转变的JavaScript方法

使用CSS和JavaScript结合

在HTML中定义一个元素，通过JavaScript动态修改其CSS渐变属性。例如创建一个从红色到蓝色的水平渐变：

<div id="gradient-box" style="width: 200px; height: 100px;"></div>
<script>
  const box = document.getElementById('gradient-box');
  box.style.background = 'linear-gradient(to right, red, blue)';
</script>

动态更新渐变颜色

通过定时器实现颜色渐变过渡效果，以下示例实现红到蓝的循环渐变：

用js实现渐变颜色转变

let startColor = [255, 0, 0]; // 红
let endColor = [0, 0, 255];   // 蓝
let currentStep = 0;
const totalSteps = 100;

function updateGradient() {
  const ratio = currentStep / totalSteps;
  const r = Math.round(startColor[0] + (endColor[0] - startColor[0]) * ratio);
  const g = Math.round(startColor[1] + (endColor[1] - startColor[1]) * ratio);
  const b = Math.round(startColor[2] + (endColor[2] - startColor[2]) * ratio);

  document.body.style.background = `rgb(${r}, ${g}, ${b})`;

  currentStep = (currentStep + 1) % (totalSteps + 1);
  if(currentStep === 0) [startColor, endColor] = [endColor, startColor];
}

setInterval(updateGradient, 50);

使用Canvas实现高级渐变

对于更复杂的渐变效果，可以使用Canvas API：

用js实现渐变颜色转变

<canvas id="gradient-canvas" width="400" height="200"></canvas>
<script>
  const canvas = document.getElementById('gradient-canvas');
  const ctx = canvas.getContext('2d');

  function drawGradient() {
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(1, 'blue');

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  drawGradient();
</script>

使用第三方动画库

对于更平滑的渐变过渡，可以考虑使用GSAP等动画库：

import { gsap } from 'gsap';

gsap.to("#gradient-box", {
  duration: 3,
  background: "linear-gradient(to right, #ff0000, #0000ff)",
  repeat: -1,
  yoyo: true
});

响应式颜色插值函数

创建一个通用的颜色过渡函数，可在任意场景下复用：

function interpolateColor(color1, color2, factor) {
  const result = color1.slice();
  for (let i = 0; i < 3; i++) {
    result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
  }
  return `rgb(${result.join(',')})`;
}

// 使用示例
const currentColor = interpolateColor([255,0,0], [0,0,255], 0.5);