Javascript 鼠标移动时页面背景渐变的变化

我有一个通过CSS在页面加载上应用了渐变的页面，我想在鼠标移动时交替使用渐变颜色和渐变度（线性渐变-4种不同的颜色都降级为白色）来设置页面动画。 如果我只使用两种颜色，效果很好。但我想在鼠标移动时从数组中获得随机颜色，但它会闪烁。有什么解决办法吗

这是我的

---

我认为您需要输入jQueryUI，然后可以使用

animate（）

更改颜色。请检查这里：

所以你应该用这样的方法：

 $( "#selector" ).animate({
          backgroundColor: bg
        }, 10 );

---

您可以将处理程序包装起来，并使用millis，直到获得可接受的结果

var colorArr = ['#dfa7ca', '#f7c2b3', '#bae0f1', '#a6d6cb'];
var grFrom = colorArr[Math.floor(Math.random()*colorArr.length)];
var grTo = '#FFFFFF';


var wrapped = _.throttle(function(e){
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  var grFrom = colorArr[Math.floor(Math.random()*colorArr.length)];
  var xy = (x + y) / 8;
  var w = $(this).width(),
  pct = 360*(+e.pageX)/w,
  bg = "linear-gradient(" + xy + "deg,"+grFrom+","+grTo+")";
  $("body").css("background-image", bg);
},50)//Try increasing/decreasing this value to see the differrence


$("body").mousemove(wrapped);

见：

更新：实际上我粘贴了一个错误的链接。这是用于

油门的
。
尝试为您的
正文设置
转换
css规则。类似于过渡：背景图像0.5s。编辑：这只是一个建议，我没有尝试。我认为闪烁是正常的，因为你改变了整个渐变，我没有真正得到你想要的，也许你想要某种动画？尝试在背景上使用过渡。您正在
mousemove
事件中选择颜色，因此每次鼠标移动时，颜色都会发生变化，这是非常重要的。所以你希望颜色在什么时候改变得更少？我尝试过转换规则，但我认为我得到了同样的闪烁效果。是的，如果我只在用户将鼠标移动到屏幕的角落时才能更改颜色，那就太好了。。我不太确定，animate会做我刚刚试着帮助他的事情：）。不确定100%的效果。CSS转换在这里就可以了。没有必要再增加一个图书馆。谢谢@marinos-an。你的解决方案基本上就是我想要的。
var colorArr = ['#dfa7ca', '#f7c2b3', '#bae0f1', '#a6d6cb'];
var grFrom = colorArr[Math.floor(Math.random()*colorArr.length)];
var grTo = '#FFFFFF';


var wrapped = _.throttle(function(e){
  var x = e.pageX - this.offsetLeft;
  var y = e.pageY - this.offsetTop;
  var grFrom = colorArr[Math.floor(Math.random()*colorArr.length)];
  var xy = (x + y) / 8;
  var w = $(this).width(),
  pct = 360*(+e.pageX)/w,
  bg = "linear-gradient(" + xy + "deg,"+grFrom+","+grTo+")";
  $("body").css("background-image", bg);
},50)//Try increasing/decreasing this value to see the differrence


$("body").mousemove(wrapped);