css - 在圆形路径上动画框阴影/文本阴影？

Question

我正在尝试使用 CSS 动画来创建光源向下指向对象、转换阴影并围绕它做圆周运动的效果。我在下面创建了一个片段来显示到目前为止我已经到了哪里。
它有点接近，但目前(因为我只有 4 个关键帧)就像光源沿着方形路径移动。我希望它看起来像沿着圆形路径移动。
我能想到的唯一解决方案是添加更多关键帧并创建(为了简单起见)十二边形路径，但有更简单的解决方案吗？是否有一种计时功能可以用来将其简化为更平滑的路径？或者我可以使用某种 Sass 函数来自动计算中间关键帧吗？
我应该注意到，一旦我使用 box-shadows 进行此操作，我还想将相同的方法应用于 text-shadows。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background-color: teal;
  box-shadow: 50px 50px 5px darkgrey;
  animation: orbit-shadow 5s linear infinite;
}

@keyframes orbit-shadow {
  0% {
    box-shadow: 50px 50px 5px darkgrey;
  }
  25% {
    box-shadow: -50px 50px 5px darkgrey;
  }
  50% {
    box-shadow: -50px -50px 5px darkgrey;
  }
  75% {
    box-shadow: 50px -50px 5px darkgrey;
  }
  1000% {
    box-shadow: 50px 50px 5px darkgrey;
  }
}

<div class="container">
  <div class="circle"></div>
</div>

Answer 1

为此，您必须考虑轮换。使用伪元素来避免旋转主元素:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position:relative;
  z-index:0;
}

.circle {
  width: 200px;
  height: 200px;
  margin:50px;
  border-radius: 100%;
  background-color: teal;
  position:relative;
}
.circle::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:inherit;
  box-shadow: 50px 50px 5px darkgrey;
  animation: orbit-shadow 5s linear infinite;
}

@keyframes orbit-shadow {
  100% {
    transform:rotate(360deg);
  }
}

body{
 margin:0;
}

<div class="container">
  <div class="circle"></div>
</div>

或者，如果您没有任何内容，您只需旋转元素:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background-color: teal;
  box-shadow: 50px 50px 5px darkgrey;
  animation: orbit-shadow 5s linear infinite;
}

@keyframes orbit-shadow {
  100% {
    transform:rotate(360deg);
  }
}

body{
 margin:0;
}

<div class="container">
  <div class="circle"></div>
</div>

另一个想法:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position:relative;
  z-index:0;
}

.circle {
  width: 200px;
  height: 200px;
  margin:50px;
  border-radius: 100%;
  background-color: teal;
  position:relative;
}
.circle::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius:inherit;
  background:darkgrey;
  filter:blur(5px);
  animation: orbit-shadow 5s linear infinite;
}

@keyframes orbit-shadow {
  0% {
    transform:rotate(0deg)   translate(50px);
  }
  100% {
    transform:rotate(360deg) translate(50px);
  }
}

body{
 margin:0;
}

<div class="container">
  <div class="circle"></div>
</div>

您也可以使用稍微不同的动画对 text-shadow 执行相同的操作，以免旋转文本:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.circle {
  position:relative;
  font-size:40px;
  font-weight:bold;
}
.circle::before,
.circle::after{
  content:attr(data-text);
  position:relative;
  z-index:1;
}

.circle::before {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  color:transparent;
  text-shadow:0 0 5px darkgrey;
  animation: orbit-shadow 5s linear infinite;
}
/* the 50px is your offset */
@keyframes orbit-shadow {
  0% {
    transform:rotate(0deg)   translate(50px) rotate(0deg);
  }
  100% {
    transform:rotate(360deg) translate(50px) rotate(-360deg);
  }
}
body{
 margin:0;
}

<div class="container">
  <div class="circle" data-text="some text"></div>
</div>