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

Question

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

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