如何使用HTML和CSS创建彩虹色的圆圈？

我试图用HTML和CSS重新创建这个gif，但这就是我被卡住的地方。这是gif：

这是我迄今为止所做的，但我被卡住了：

.圆圈{
垫顶：2件；
高度：300px；
宽度：300px；
左边距：自动；
右边距：自动；
边界半径：50%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
动画：scaleIn 4s无限立方贝塞尔（.36、.11、.89、.32）；
背景：rgb（32,6146）
}
@关键帧缩放{
从{
变换：缩放（.5，.5）；
不透明度：.5；
}
到{
变换：比例（2.5,2.5）；
不透明度：0；
}
}

获得彩虹颜色轮廓的一种方法是使用另一个位于较暗的内部div后面的div。这种彩虹色的轮廓可以通过使用线性渐变来实现。所有CSS动画都设置为

infinite

，以允许它们重复运行。在这里，我使用了一些CSS变量来设置变量名前面由

--

指示的圆圈的大小。值得注意的是，最好将其放在包装器/容器div中，而不是下面的绝对位置。中心的脉冲也可以进行一些调整。按下面的“运行代码段”按钮查看结果：

正文{
背景：rgba（6,2,20,1）；
}
#模糊的彩虹圈{
位置：绝对位置；
--圆直径：200px；
顶部：计算值（50%-var（--圆直径）/2）；
左：计算值（50%-var（--圆直径）/2）；
高度：var（--圆直径）；
宽度：var（--圆直径）；
边界半径：计算值（var（--圆直径）/2）；
背景：线性梯度（139.84度，#A692ED 14.35%，#6CECAD 45.6%，#D87EAA 82.79%）；
动画：旋转0.8s线性无限；
过滤器：模糊（20px）；
}
#彩虹环{
位置：绝对位置；
--圆直径：200px；
顶部：计算值（50%-var（--圆直径）/2）；
左：计算值（50%-var（--圆直径）/2）；
高度：var（--圆直径）；
宽度：var（--圆直径）；
边界半径：计算值（var（--圆直径）/2）；
背景：线性梯度（139.84度，#A692ED 14.35%，#6CECAD 45.6%，#D87EAA 82.79%）；
动画：旋转0.8s线性无限；
}
#大圆{
位置：绝对位置；
--圆直径：175px；
顶部：计算值（50%-var（--圆直径）/2）；
左：计算值（50%-var（--圆直径）/2）；
高度：var（--圆直径）；
宽度：var（--圆直径）；
边界半径：计算值（var（--圆直径）/2）；
背景：rgba（6,2,20,1）；
}
#中环{
位置：绝对位置；
--圆直径：10px；
顶部：计算值（50%-var（--圆直径）/2）；
左：计算值（50%-var（--圆直径）/2）；
高度：var（--圆直径）；
宽度：var（--圆直径）；
边界半径：计算值（var（--圆直径）/2）；
背景：rgba（19,12,49,1）；
动画：线性无限增长；
}
#小圆{
位置：绝对位置；
--圆直径：10px；
顶部：计算值（50%-var（--圆直径）/2）；
左：计算值（50%-var（--圆直径）/2）；
高度：var（--圆直径）；
宽度：var（--圆直径）；
边界半径：计算值（var（--圆直径）/2）；
背景：rgba（19,12,49,1）；
动画：生长2s线性无限；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
@关键帧增长{
0% {
变换：比例（1）；
不透明度：1；
}
50% {
转换：量表（17）；
不透明度：0；
}
51% {
变换：比例（0）；
不透明度：0；
}
100% {
变换：比例（0）；
不透明度：0；
}
}
@关键帧增长2{
0% {
变换：比例（0）；
不透明度：0；
}
40% {
变换：比例（0）；
不透明度：0；
}
41% {
变换：比例（1）；
不透明度：1；
}
100% {
转换：量表（17）；
不透明度：0；
}
}

我不知道你在哪里学习。。但这是一个地狱般的研究。。。。Itadakimas。。。谢谢你的晚餐。。。我喜欢做这件事


*{
填充：0；
保证金：0；
框大小：边框框；
}
.身体{
背景色：#050210；
高度：100vh；
宽度：100vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：相对位置；
}
.圆圈{
位置：绝对位置；
高度：230像素；
宽度：230px；
边界半径：50%；
背景：rgb（32,6146）
}
.制作动画{
转换：翻译（-50%，-50%）；
动画：缩放1.9秒无限；
}
.边界{
/*--b:5px*/
/*边框宽度*/
动画：旋转3s无限线性；
z指数：0；
/*比例：4.5*/
--b:10px；
--c：线性梯度（140度，红色，黄色，绿色）；
背景：透明；
盒影：5px 5px 19px#54aa00，-5px-5px 19px#ff5a00，-5px 5px 19px#f9e203，5px-5px 19px#f9e203；
}
.边界：之后{
内容：“；
显示：内联块；
填充顶部：100%；
}
.边界：之前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
背景：var（--c，线性梯度（向右，#9c20aa，#fb3570））；
填充：var（--b）；
边界半径：50%；
-webkit掩码：线性渐变（#fff 0）内容框，线性渐变（#fff 0 0）；
-webkit掩码复合：目标输出；
面具组合：排除；
}
@关键帧缩放{
从{
变换：比例（.15，.15）；
不透明度：.5；
}
到{
变换：比例（1,1）；
不透明度：0；
}
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}

试着用一个更好更具体的问题标题：）嘿，兄弟，介意看看我下面的代码，告诉我为什么我的圆圈上的边界模糊…@AshishBhattarai我试着弄清楚它可能是什么，但我不太确定。看起来光晕是正确的，但是
-webkit mask
完全切断了彩色边框。是的，似乎切断了像素。。。（（哭））。。。。我也喜欢你的。。。层层叠叠