用js实现渐变颜色转变
使用 CSS 线性渐变
通过 JavaScript 动态修改元素的 background 属性，结合 CSS 的 linear-gradient 实现渐变效果。以下代码示例展示如何从红色渐变到蓝色：
const element = document.getElementById('target');
element.style.background = 'linear-gradient(to right, red, blue)';动态颜色过渡动画
使用 requestAnimationFrame 实现颜色值的平滑过渡。以下代码实现从起始颜色到目标颜色的动态渐变：
function animateGradient(startColor, endColor, duration, element) {
const start = hexToRgb(startColor);
const end = hexToRgb(endColor);
const startTime = performance.now();
function updateGradient(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const r = Math.floor(start.r + (end.r - start.r) * progress);
const g = Math.floor(start.g + (end.g - start.g) * progress);
const b = Math.floor(start.b + (end.b - start.b) * progress);
element.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
if (progress < 1) {
requestAnimationFrame(updateGradient);
}
}
requestAnimationFrame(updateGradient);
}
function hexToRgb(hex) {
const r = parseInt(hex.substring(1, 3), 16);
const g = parseInt(hex.substring(3, 5), 16);
const b = parseInt(hex.substring(5, 7), 16);
return { r, g, b };
}
// 使用示例
animateGradient('#FF0000', '#0000FF', 2000, document.body);使用 Canvas 实现高级渐变
通过 Canvas API 创建更复杂的渐变效果：
const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 200;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'green');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);使用第三方库
对于复杂渐变需求，可以考虑使用专门的动画库：
// 使用 anime.js 实现颜色过渡
anime({
targets: '#target',
backgroundColor: ['#FF0000', '#0000FF'],
duration: 1000,
easing: 'linear'
});注意事项
颜色值可以使用 HEX、RGB 或 HSL 格式表示 动态渐变可能影响性能，复杂场景建议使用 CSS 硬件加速 渐变方向可以通过修改线性渐变的角度或 Canvas 的坐标点调整
