具有波动阴影的动画阴影效果

Question

如何创建连续变化的文本阴影，使其在用户端像CSS效果那样自动波动，带有连续变化的阴影宽度。

我知道如何添加CSS阴影，但如何使其波动呢？

#shadow {
  text-shadow: 4px 4px 4px #aaa;
}

<div id=shadow>shadow effect how to fluctuate it</div>

- Devlopers Friend

---

你能提供一下你想要的效果的样例吗？从你的描述中很难理解。一个图片或动态gif图会更好，或者是一个示例网站的链接。 - Racil Hilan

什么是“波动”？ - Mr. Alien

我所指的波动是阴影宽度不断变化，一会儿增加，一会儿减少。@Mr.Alien - Devlopers Friend

先生，我找不到样本，但我正在尝试创建一个动画文本，其阴影不断变化。@RacilHilan - Devlopers Friend

Answer 1

不确定您在这里所指的波动是什么，但如果您想改变您的text-shadow的模糊半径，您可以在这里使用animation...

我正在使用@keyframes来动画化您的text-shadow的X、Y和模糊程度。如果您愿意，只需将值8px更改为其他值即可单独动画化某个轴或模糊半径。

#shadow {
  text-shadow: 4px 4px 4px #aaa;
  animation: animate-shadow 1s ease-in infinite;
}

@keyframes animate-shadow {
  50% {
    text-shadow: 8px 8px 8px #aaa;
  }
}

<div id=shadow>shadow effect how to fluctuate it</div>

- Mr. Alien

---

先生，我正在尝试做类似于这样的事情。 - Devlopers Friend

@AnuragBatra 太好了 :) 你也可以改变 color 或类似的属性，在你的 @keyframes 中不断添加属性。 - Mr. Alien

Answer 2

使用关键帧并模糊您的文本阴影。

#shadow {
  text-shadow: 4px 4px 4px #aaa;
  animation: mymove 5s infinite;
}
@keyframes mymove {
  50% {text-shadow: 10px 20px 30px #aaa;}
}

<div id=shadow>shadow effect how to fluctuate it</div>

- Siddharth