如何用渐变颜色动画文本

How to animate text with Gradient color?

本文关键字：文本 动画 变颜色 何用渐      更新时间：2023-09-26

我写了一段代码来动画网页上一些文本的颜色。方法如下:- 

$(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的位置，但没有工作。

谢谢

我试试这个，

    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

相关文章：