如何在 CSS 中向内创建 Pulse 效果？

Question

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

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

• 从徽标的边缘向内。
• 从徽标内部到边缘。

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%。试试看。希望这有帮助