Question

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

Answer 1

您可以使用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

Answer 2

以下是如何为body标签背景设置动画的示例：

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

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

请记住，hsl不是crossbrowser，你也可以用hex / rgb颜色来做。

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

Answer 3

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

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

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

Answer 4

我会尝试使用JQuery color plugin。查看示例here（单击演示），它们似乎完全按照您的描述进行。

如何让背景逐渐改变颜色？

4 个答案: