css - 是否有一个简单的修复方法可以在路径而不是中心 anchor 上旋转 css 椭圆形阴影？

Question

我有一个围绕椭圆形的旋转框阴影作为加载图标。在一个完美的圆圈中，这没有问题，但是因为我想给它添加一个标志，我宁愿它围绕一条路径而不是中间的 anchor 旋转。

目前，我已经完美地制作了旋转前的形状，但是在添加@keyframes 旋转后，它会围绕对象中间的 anchor 旋转。 如果删除 @keyframes，我希望颜色围绕该形状旋转。

.gradient-spinner{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -20px -22px;
	width: 48px;
	height:36px;
	transform: rotate(138deg);
	border:1px transparent #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 0px transparent inset,
	            0 -5px 20px 0px rgba(1,197,255,0.4) inset,
	            0 0 20px 0px rgba(0,150,130,0.4) inset,
	            0 5px 20px 0px rgba(162,58,236,0.4) inset,
	            0 5px 20px 5px rgba(1,197,255,0.4),
	            0 0 20px 5px rgba(0,150,130,0.4),
	            0 -5px 20px 2px rgba(162,58,236,0.4);
	            
	            animation:gradient 2s linear infinite;
}

@keyframes gradient{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}

<div class="gradient-spinner z-i-100">
</div>

Answer 1

您是否考虑过将圆圈放入容器中并压平外容器而不是圆圈？示例如下:

.gradient-spinner{
	
	width: 48px;
	height: 48px;
	transform: rotate(138deg);
	border:1px transparent #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 0px transparent inset,
	            0 -5px 20px 0px rgba(1,197,255,0.4) inset,
	            0 0 20px 0px rgba(0,150,130,0.4) inset,
	            0 5px 20px 0px rgba(162,58,236,0.4) inset,
	            0 5px 20px 5px rgba(1,197,255,0.4),
	            0 0 20px 5px rgba(0,150,130,0.4),
	            0 -5px 20px 2px rgba(162,58,236,0.4);
	            
	            animation:gradient 2s linear infinite;
}

@keyframes gradient{
	0%{
		transform:rotate(0deg);
	}
	100%{
		transform:rotate(360deg);
	}
}

.flatten {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px -22px;
  transform: scaleY(0.75);
}

<div class="flatten"> 
    <div class="gradient-spinner z-i-100">
    </div>
</div>