如何让背景逐渐变色？

问题描述：

我试图制作一个网页，图像的背景颜色逐渐改变颜色。我知道如何改变Javascript中的某些东西的背景颜色，但我不知道如何“动画”这样说（不使用Flash）。如何让背景逐渐变色？

答

您可以使用CSS转换来获得该效果。每次

-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秒的新价值：只需添加CSS代码到从JS改变的元素。

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

这真的很好。我只是用JS中的一组颜色来投射一个数组，并告诉它每隔几秒从该数组中生成一个随机颜色。谢谢！ – 2012-02-20 23:10:55

答

您可能需要使用setTimeout()功能：

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

，并调用animateBg（）在你的身体的onload处理。例如，<body onload="animateBg()">。

您也可以使用'的setInterval（）'功能（具有相同参数），这将使得 “重新武装” 你的'animateBg（）'内'animateBg定时器（）'不必要（只需调用'setInterval（animateBg，20）'就可以每20毫秒调用一次'animateBg（）'函数 – 2012-02-20 22:32:32

无论采用哪种方法，您都需要添加一个'if'测试来决定是否继续动画，即测试（使用'setInterval（）'你需要一个额外的变量来保存对定时器id的引用，这样你可以取消它，再加上'setTimeout（）'往往比''setInterval（）'关于如果用户切换到另一个选项卡然后再回来会发生什么。） – nnnnnn 2012-02-20 22:51:35

好点。我推测这是一个永恒的循环动画出于某种原因。 – 2012-02-21 07:12:06

答

我会尝试使用JQuery color plugin。看看例子here（点击演示），它们看起来完全符合你的描述。

答

这里是如何动画body标签背景的例子：

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

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

请记住，HSL是不是跨浏览器，你也可以做六角/ RGB颜色的伎俩。

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

如何让背景逐渐变色？

相关推荐