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更改为其他值，即可为特定轴或模糊半径设置动画。

＆＃13;

#shadow {
  text-shadow: 4px 4px 4px #aaa;
  animation: animate-shadow 1s ease-in infinite;
}

@keyframes animate-shadow {
  50% {
    text-shadow: 8px 8px 8px #aaa;
  }
}

＆＃13;

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

＆＃13;

Answer 2

您可以创建JS间隔。

var shadow = document.getElementById("shadow");

var i = 0, increment = 0.05;

setInterval(function() {
  shadow.style.textShadow = i + "px " + i + "px " + i + "px #AAA";
  i += increment;
  if (i > 3) {
    increment = -0.05;
  } else if (i < 1) {
    increment = 0.05;
  }
}), 0;

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

Answer 3

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

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

动画阴影效果与波动的阴影

3 个答案: