html - 如何在CSS中向内创建脉冲效果？

Question

在下面的代码中，有一个 CSS Pulse 动画。效果是朝向 Logo 的外部。如何对 Logo 的内部创建相同的效果？

If possible can you show me how to do both effects :

• 从 Logo 的边缘向内。
• 从 Logo 内部到边缘。

https://codepen.io/olam/pen/zcqea

Answer 1

你只是轻描淡写地翻转了效果。开始了:

@keyframes pulse {
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  30% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  0% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

我只是切换了 100% 和 0%，并将 70% 更改为 30%。试试看。希望这有帮助