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

Question

如何创建在用户端自动波动的连续变化的文本阴影，如 CSS 具有连续变化阴影宽度的动画文本效果。

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

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

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

Answer 1

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

我正在使用 @keyframes 并为 X Y 和 text-shadow 的模糊设置动画。如果需要，您可以仅通过将值 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>

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>

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

animated shadow effect with fluctuating shadow

css

css-selectors

css-float