html - 如何创建像冲击波一样的 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>