如何使用JavaScript创建颜色变化的文本渐变？

我试着做一个每400ms改变颜色的渐变。我这样做的方式是我使用了其他人的随机颜色变换器，并将其添加到h1标签中，因此它会发生变化。当我在没有梯度的情况下做的时候，它是有效的，但是一旦我尝试添加一个梯度，它就完全不起作用了。这是我没有梯度的代码：

文字动画
身体{
背景色：黑色；
}
h1{
过渡时间：300ms；
文本对齐：居中；
垂直对齐：中间对齐；
字体大小：200px；
字体系列：Impact、Arial、衬线；
}
随机文本
函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
函数名（）{
document.getElementById（“h1”）.style.color=getRandomColor（）；
设置超时（标题，300）；
}
title（）；

您需要使用加号而不是逗号连接字符串

var col = "-webkit-linear-gradient(" + getRandomColor() + ", " + getRandomColor() + ")";
document.getElementById("h1").style.background = col;

您需要设置：

background: -webkit-linear-gradient(red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

一起。（我不知道为什么？？，但它对我有效）

JS

var s = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(s);
function title() {
  s.innerHTML = "h1 {\n\
        background: -webkit-linear-gradient(" + getRandomColor() + ", " + getRandomColor() + ");\n\
        -webkit-background-clip: text;\n\
        -webkit-text-fill-color: transparent;\n\
    }";
  setTimeout(title, 300);
}
title();

---

注意，如果您使用混合模式，firefox也可以使用混合模式