在圆形路径上对盒形阴影/文本阴影进行动画处理？

问题描述

我正在尝试使用CSS动画来创建光源指向对象的效果，该对象投射阴影并围绕它作圆周运动。我在下面创建了一个代码段，以显示到目前为止的内容。

虽然有点接近，但目前（因为我只有4个关键帧），就像光源沿着方形路径移动一样。我希望它看起来像是沿着圆形路径移动。

我能想到的唯一解决方案是添加更多关键帧并创建（为简单起见）十二边形形状的路径，但是有没有更简单的解决方案？我是否可以使用某种计时功能来缓解使其变得更平滑？还是可以使用某种Sass函数自动计算中间关键帧？

我应该注意到，一旦我将其用于盒形阴影，我也想将相同的方法应用于文本阴影。

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

解决方法

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

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