更改渐变背景的颜色（Chrome）

Question

我正在尝试以一种迷幻的方式更改渐变背景的颜色（颜色会很奇怪）

我写了下面的代码，但我不明白为什么我根本不能改变背景颜色。

var start1 = [0,216,255];
var start2 = [50,255,224];
setInterval(function (){
    $("body").css("background", "-webkit-gradient(linear, 0% 0%, 100% 0%, from(rgb("+start1[0]+", "+start1[1]+", "+start1[2]+")), to(rgb("+start2[0]+", "+start2[1]+", "+start2[2]+")));");
    start1[0] = checknumber(start1[0]+1);
    start1[1] = checknumber(start1[1]+1);
    start1[2] = checknumber(start1[2]+1);
    start2[0] = checknumber(start1[0]+1);
    start2[1] = checknumber(start1[1]+1);
    start2[2] = checknumber(start1[2]+1);
},100);

我没有收到任何错误，背景只保持白色。 我猜它会比我想象的要复杂一些

checknumber()函数只检查数字是否大于 255，如果大于则重置为 0。

Answer 1

你在寻找这样的东西：

http://jsfiddle.net/4nuhpmov/

问题是您的 CSS 语法，我想您可能一直在使用旧参考。

我更改了 CSS 操作 JavaScript，如下所示：

$("body").css("background",
    "linear-gradient(" + degrees + "deg, rgba(" + start1[0] + ", " + start1[1] + ", " + start1[2] + ", 1),  rgba(" + start2[0] + ", " + start2[1] + ", " + start2[2] + ", 1))");

我还添加了一个度数计数器。

这可能不是最好的方法，但它应该让你开始（我不认为它像你预期的那样迷幻/疯狂，但你可以玩弄这些值）。

您可以使用以下链接查找最新的语法：

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient