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

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

1 个答案: