如何让背景逐渐变色？
Posted
技术标签:
【中文标题】如何让背景逐渐变色？【英文标题】：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/
【讨论】：
以上是关于如何让背景逐渐变色？的主要内容，如果未能解决你的问题，请参考以下文章