如何创建CSS动画像冲击波

Question

我的工作以创建CSS动画与像所看到的这个设计效果冲击波：

我现在尝试创建一个冲击波，但问题是圆的内部填充，并且不具有所需中风的影响。这是我目前有：

这里是我的代码：

  svg {
    border-radius: 50%;
    animation: pulse-bomb 4s 0s ease-out infinite;
  }

  @keyframes pulse-bomb {
    0% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, 0), 0 0 0px 0px rgba(233,233,246, 0.2), 0 0 0px 0px rgba(233,233,246, 0);
      transform: scale(1);
    }
    10% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, .8), 0 0 12px 10px rgba(233,233,246, 0.2), 0 0 12px 14px rgba(233,233,246, 0);
      transform: scale(1.08);
    }
    60% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, 0), 0 0 0px 100px rgba(233,233,246, 0.0), 0 0 0px 100px rgba(233,233,246, 0);
      transform: scale(0.96);
    }
    80% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, 0), 0 0 0px 0 rgba(233,233,246, 0), 0 0 0px 0 rgba(233,233,246, 0);
      transform: scale(1);
    }
  }

我如何能更新我的动画任何想法没有在整个冲击波圈填？

Answer 1

我会去多radial-gradient和动画每个人的背景大小，以获得所需的效果

body {
  margin: 0;
  background: lightblue;
}

.box {
  width: 250px;
  height: 250px;
  margin: 20px auto;
  background:
    radial-gradient(
      transparent 21%, rgba(233,233,246, .8) 21%,
      rgba(233,233,246, .8) 22%,transparent 28%),
    radial-gradient(
      transparent 36%,rgba(233,233,246, .8) 40%,
      rgba(233,233,246, .8) 42%,transparent 50%),
    radial-gradient(
      transparent 60%,rgba(233,233,246, .8) 65%,
      rgba(233,233,246, .8) 66%,transparent 70%);
  background-size:0 0,0 0,0 0;
  background-position:center;
  background-repeat:no-repeat;
  animation:change 5s linear infinite;
}
@keyframes change{
  0% {
    background-size:0 0,0 0,0 0;
  }
  25% {
    background-size:0 0,0 0,30% 30%;
  }
  50% {
    background-size:10% 10%,40% 40%,60% 60%;
  }
  75% {
    background-size:100% 100%,100% 100%,100% 100%;
  }
  100% {
    background-size:100% 100%,100% 100%,100% 100%;
  }
}

<div class="box">
</div>