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

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

1 个答案: