Javascript 为此加载点脚本选择不同的颜色

这里是一个10点加载动画脚本

正如您所见，我们可以为所有点选择单一颜色，但是，我想为每个点选择不同的颜色，我尝试创建唯一的点div，并在CSS中控制它们的颜色，但是这样动画崩溃了

任何帮助都将不胜感激

以下是原始代码：

TweenMax.交错到（“.点”，2{
x:220，
背景颜色：“白色”，
重复：-1，
ease:SlowMo.ease.config（0.3,0.2，false）
}, 0.25);
TweenMax.从（“.点”，2{
不透明度：0，
比例：0.7，
重复：-1，
ease:SlowMo.ease.config（0.3,0.2，true）
}, 0.25);
html{
宽度：260px；
高度：32px；
溢出：隐藏；
}
身体{
背景色：透明；
文本对齐：居中；
填充：50px；
}
.集装箱{
背景色：透明；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.圆点{
位置：绝对位置；
宽度：1米；
高度：1米；
边界半径：50%；
背景色：#d0c9d8；
不透明度：1；
左：-120px；
}
多斯先生{
位置：绝对位置；
宽度：1米；
高度：1米；
边界半径：50%；
背景色：#fcba03；
不透明度：1；
左：-120px；
}
.链接{
位置：绝对位置；
底部：20px；
右：30px；
颜色：白色；
字体大小：40px；
文字装饰：无；
}

您可以使用“”

第n个子伪类由一个参数指定，该参数
表示匹配元素的模式

为你的情况


TweenMax.交错到（“.点”，2{
x:220，
背景颜色：“白色”，
重复：-1，
ease:SlowMo.ease.config（0.3,0.2，false）
}, 0.25);
TweenMax.从（“.点”，2{
不透明度：0，
比例：0.7，
重复：-1，
ease:SlowMo.ease.config（0.3,0.2，true）
}, 0.25);
html{
宽度：260px；
高度：32px；
溢出：隐藏；
}
身体{
背景色：透明；
文本对齐：居中；
填充：50px；
}
.集装箱{
背景色：透明；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.圆点{
位置：绝对位置；
宽度：1米；
高度：1米；
边界半径：50%；
背景色：#d0c9d8；
不透明度：1；
左：-120px；
}
.点：第n个孩子（2n）{
背景色：红色；
}
.点：第n个孩子（3n）{
背景颜色：蓝色；
}
多斯先生{
位置：绝对位置；
宽度：1米；
高度：1米；
边界半径：50%；
背景色：#fcba03；
不透明度：1；
左：-120px；
}
.链接{
位置：绝对位置；
底部：20px；
右：30px；
颜色：白色；
字体大小：40px；
文字装饰：无；
}

您可以使用“”

第n个子伪类由一个参数指定，该参数
表示匹配元素的模式

为你的情况


TweenMax.交错到（“.点”，2{
x:220，
背景颜色：“白色”，
重复：-1，
ease:SlowMo.ease.config（0.3,0.2，false）
}, 0.25);
TweenMax.从（“.点”，2{
不透明度：0，
比例：0.7，
重复：-1，
ease:SlowMo.ease.config（0.3,0.2，true）
}, 0.25);
html{
宽度：260px；
高度：32px；
溢出：隐藏；
}
身体{
背景色：透明；
文本对齐：居中；
填充：50px；
}
.集装箱{
背景色：透明；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.圆点{
位置：绝对位置；
宽度：1米；
高度：1米；
边界半径：50%；
背景色：#d0c9d8；
不透明度：1；
左：-120px；
}
.点：第n个孩子（2n）{
背景色：红色；
}
.点：第n个孩子（3n）{
背景颜色：蓝色；
}
多斯先生{
位置：绝对位置；
宽度：1米；
高度：1米；
边界半径：50%；
背景色：#fcba03；
不透明度：1；
左：-120px；
}
.链接{
位置：绝对位置；
底部：20px；
右：30px；
颜色：白色；
字体大小：40px；
文字装饰：无；
}