如何用渐变颜色为文本设置动画？

Question

我已经编写了一段代码来动画化网页上某些文本的颜色。 这是如何做：-

$(document).ready(function() {

 spectrum();

 function spectrum(){
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    $('#p1').animate( { backgroundColor: hue }, 2000);
    spectrum();
 }

})

其中#p1是文本块的标识符。 此代码生成随机颜色并为文本颜色设置动画。
这是CSS-

#p1 {
    text-align: center;
    font-family: roboto;
    font-size: 96px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

但是，我想使用以下方式为我的文本添加渐变：-
background: -webkit-linear-gradient(white, red);

如何使用我的spectrum()函数为我的-webkit-linear-gradient(white, x)的第二种颜色（x）设置动画或更改

我尝试了一些大胆的猜测，例如将-webkit行替换为backgroundColor但这没有用。

谢谢

Answer 1

我试试这个

    function spectrum(){
      var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
      $("#p1").css(
        {
          background:"-webkit-linear-gradient(#fff,"+hue+")",
          background:"-o-linear-gradient(#fff,"+hue+")",
          background:" -moz-linear-gradient(#fff,"+hue+")",
          background:"linear-gradient(#fff,"+hue+")"
        }
     );

     }
     setInterval(spectrum,1000);

希望这就是您想要的内容检查此链接： http : //codepen.io/piyushsharma21/pen/KgxVoV