Javascript 创建具有不透明度的渐变动画

我对html、javascript和css非常陌生，我正在使用某人的代码来制作渐变动画。这是背景：rgb，我把它改成背景：rgba。它仍然可以工作，但没有不透明

如何使渐变也显示不透明度

代码在这里的运行方式与在chrome中不同

JS

var colors=新数组(
[62,35,255,0.5],
[60,255,60,0.5],
[255,35,98,0.5],
[45,175,230,0.5],
[255,0,255,0.5],
[255,128,0,0.5]);
var阶跃=0；
//颜色表索引用于：
//当前左侧颜色
//剩下的下一个颜色
//当前颜色权限
//下一个颜色对吗
var颜色指数=[0,1,2,3]；
//过渡速度
var梯度速度=0.002；
函数updateGradient（）
{
如果（$==未定义）返回；
var c0_0=颜色[颜色指数[0]；
var c0_1=颜色[颜色指数[1]；
var c1_0=颜色[颜色指数[2]；
var c1_1=颜色[颜色指数[3]；
var istep=1-步；
var r1=数学舍入（istep*c0_0[0]+步骤*c0_1[0]）；
变量g1=数学舍入（istep*c0_0[1]+步骤*c0_1[1]）；
变量b1=数学舍入（istep*c0_0[2]+步骤*c0_1[2]）；
变量a1=数学舍入（istep*c0_0[3]+步骤*c0_1[3]）；
var color1=“rgba（“+r1+”、“+g1+”、“+b1+”、“+a1+”）；
var r2=数学舍入（istep*c1_0[0]+步骤*c1_1[0]）；
var g2=数学舍入（istep*c1_0[1]+步骤*c1_1[1]）；
变量b2=数学舍入（istep*c1_0[2]+步骤*c1_1[2]）；
变量a2=数学舍入（istep*c1_0[3]+步骤*c1_1[3]）；
var color2=“rgba（“+r2+”、“+g2+”、“+b2+”、“+a2+”）；
$（'#colorstrip'）.css({
背景：“-webkit渐变（线性、左上、右上、从（“+color1+”）到（“+color2+”）））.css({
背景：“-moz线性梯度（左，“+color1+”0%，“+color2+”100%）”；
步长+=梯度速度；
如果（步骤>=1）
{
步骤%=1；
颜色索引[0]=颜色索引[1]；
颜色指数[2]=颜色指数[3]；
//选择两个新的目标颜色索引
//不要拾取与当前相同的
colorIndexes[1]=（colorIndexes[1]+数学地板（1+数学随机（）*（colors.length-1）））%colors.length；
colorIndexes[3]=（colorIndexes[3]+数学地板（1+数学随机（）*（colors.length-1）））%colors.length；
}
}
setInterval（updateGraient，10）
@导入url（'https://fonts.googleapis.com/css?family=Pangolin');
/*Hoofdpagina.html样式*/
#色带{
宽度：100%；高度：6%；
位置：固定；
顶部：-5px；
左：0；
背景色：rgba（10,10,10,0.5）；
边框右下半径：5%；
边界左下半径：5%；
}
#色带：悬停{
背景色：rgba（207254250.9）；
}
身体{
背景：url（'images/farmbackground.png'）；
背景重复：无重复；
背景附件：固定；
背景位置：中心；
背景尺寸：封面；
背景混合模式：变暗；
}
导航{
宽度：80%；
}
导航ul{
文本对齐：居中；
利润率：0.10%0.0；
左侧填充：0；
}
李国荣{
宽度：25%；
浮动：左；
}
/*适合所有产品的款式




在生成的rgba中，使用Math.round函数将最后一个参数a2和a1四舍五入到最接近的数字。因此a2和a1的值始终为1。请删除a2和a1的四舍五入，然后重试