Есть ли простое исправление, чтобы вращать овальную тень CSS на пути, а не центральный якорь? - PullRequest
Новая
       26

Есть ли простое исправление, чтобы вращать овальную тень CSS на пути, а не центральный якорь?

0 голосов
/ 09 июня 2019

У меня есть вращающаяся тень от овала для иконки загрузки.В идеальном круге это не составило бы проблем, но, поскольку я хотел бы добавить к нему логотип, я бы предпочел, чтобы он вращался вокруг пути, а не на якоре в середине.

В настоящее время у меня есть идеальная форма перед вращением, но после добавления вращения @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>

1 Ответ

0 голосов
/ 16 июня 2019

Рассматривали ли вы, чтобы поместить круг в контейнер и сплющить внешний круг вместо круга? Пример показан ниже: 

.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>
...