如何让背景逐渐变色？答案

【问题标题】：How to make background gradually change colors?如何让背景逐渐变色？
【发布时间】：2012-03-11 06:42:49
【问题描述】：

我正在尝试制作一个网页，其中图像的背景颜色逐渐改变颜色。我知道如何在 Javascript 中更改某些内容的背景颜色，但我不知道如何“动画化”它（不使用 Flash）。

【问题讨论】：

【解决方案1】：

您可能想要使用setTimeout() 函数：

function animateBg()
{
  myElement.style.backgroundColor = someNewValue;
  setTimeout(animateBg, 20); // 20 milliseconds
}

并在您身体的onload 处理程序中调用 animateBg()。例如，<body onload="animateBg()">。

【讨论】：

您也可以使用setInterval() 函数（使用相同的参数），这将使animateBg() 内的animateBg() 计时器变得不必要（只需调用setInterval(animateBg, 20) 即可animateBg() 函数每 20 毫秒调用一次。
无论哪种方式你真的需要添加一个if测试来决定是否继续动画，即测试背景是否已经达到它的目标颜色。（并且使用setInterval()，您将需要一个额外的变量来保持对计时器ID的引用，以便您可以取消它，另外setTimeout()往往比setInterval()更好地处理如果用户切换到另一个会发生什么选项卡，然后稍后再回来。）
好点。由于某种原因，我推测这是一个永恒的循环动画。

【解决方案2】：

您可以使用 CSS 过渡来获得这种效果。只需将该 css 代码添加到从 js 更改的元素中：

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

每次更改任何样式值时，都会在 css 上将更改从当前值动画到新值 1 秒。

它仅适用于现代浏览器。看一个例子：click

【讨论】：

实际上效果很好。我只是在 JS 中使用一组颜色投射一个数组，并告诉它每隔几秒从该数组中生成一个随机颜色。谢谢！

【解决方案3】：

我会尝试使用JQuery color plugin。查看示例here（点击演示），它们似乎完全符合您的描述。

【讨论】：

【解决方案4】：

这是一个关于如何为 body 标签背景设置动画的示例：

function animateBg(i) {
    document.body.style.backgroundColor = 'hsl(' + i + ', 100%, 50%)';

    setTimeout(function() {
        animateBg(++i)
    }, i);
}
animateBg(0);

请记住，hsl 不是跨浏览器，您也可以使用 hex/rgb 颜色来解决问题。

Jsfiddle 链接：http://jsfiddle.net/euthg/

【讨论】：