我可以动画背景渐变的变化吗？答案

【问题标题】：Can I animate the change of a background gradient?我可以动画背景渐变的变化吗？
【发布时间】：2014-10-10 16:00:19
【问题描述】：

我正在尝试使渐变淡入作为背景颜色。

$('body').animate({
  background: '-webkit-gradient(linear,left top,left bottom,from(#b0c4ff),to(#6289ff)) fixed)'
}, 2000, function(){});

http://jsfiddle.net/myLf9o0j/3/

jQuery animate backgroundColor

Animation in css with gradient colors

【问题讨论】：

您希望它从白色淡入吗？或者你想让它从一种颜色褪色到另一种颜色？如果你想让它淡入白色，只需动画元素不透明度并确保它后面有一个白色元素（通常是身体）
不使用jQuery .animate()AFAIK。
从颜色到颜色。
您应该可以使用github.com/jquery/jquery-color。不过我还没玩过渐变
去掉'fixed'之后的')'

标签： jquery jquery-animate gradient

【解决方案1】：

制作一个完整的页面 div 并将其添加到所有其他元素后面的背景上。然后你就可以让它动画了。

检查下面的代码：

function goodMorning(){
	$('#background').animate({
            opacity: 1
	}, 2000);
}

goodMorning();

body{
    background-color: red;
}
#background{
    opacity: 0;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: -1;
    background: -webkit-gradient(linear,left top,left bottom,from(#b0c4ff),to(#6289ff)) fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
<p>Hello :)</p>

【讨论】：