通过box-shadow实现波纹效果

@keyframes ripple {
  0% {
    box-shadow: 0 0 1px 0 rgba(255, 0, 0, 0.5),
      0 0 1px 10vw rgba(255, 0, 0, 0.4),
      0 0 1px 20vw rgba(255, 0, 0, 0.3),
      0 0 1px 30vw rgba(255, 0, 0, 0.2),
      0 0 1px 40vw rgba(255, 0, 0, 0.1);
  }

  100% {
    box-shadow: 0 0 1px 10vw rgba(255, 0, 0, 0.4),
      0 0 1px 20vw rgba(255, 0, 0, 0.3),
      0 0 1px 30vw rgba(255, 0, 0, 0.2),
      0 0 1px 40vw rgba(255, 0, 0, 0.1),
      0 0 1px 50vw rgba(255, 0, 0, 0);
  }
}

利用两个box-shadow的转变实现简单的波纹效果

代码片段:https://developers.weixin.qq.com/s/77rGNkmB7wkI