Question

我在椭圆形周围有一个旋转的框阴影，用于加载图标。在理想的情况下，这将是没有问题的，但是由于我想为其添加徽标，因此，我宁愿它围绕路径而不是中间的锚点旋转。

当前，我具有完美旋转之前的形状，但是在添加@keyframes旋转后，它围绕对象中间的锚点旋转。如果删除@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>

有没有简单的解决方法可以在路径而不是中心锚点上旋转css椭圆形阴影？

1 个答案: