从页面中心开始“爆炸”的轻动画

Question

我想使用 CSS 制作一个径向渐变圆的动画以扩展页面的全长和全宽（全白），然后反转此动画（返回原始状态）。这应该看起来像从中心逐渐“爆炸”的白色，一旦达到全宽/全高，就会逐渐变成全白，但是我的白色背景过早开始过渡。我如何做到这一点？

scss

    .container {
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      background: black;
      height: 100vh;
    }

    .flash-container {
        animation: grow 5s 2s linear forwards;
        width: 20px;
        height: 20px;
        z-index: 4;

        #flash {
            background: radial-gradient(circle, white, transparent 10%);
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 100%;
        }
    }

    @keyframes grow {
        to {
            transform: scale(1000);
            background: white;
        }
    }

html

      <div class="container">
        <div class="flash-container">
          <div class="flash"></div>
        </div>
      </div>

Jsfiddle：https://jsfiddle.net/zv3bmw8j/2/

Answer 1

我更新了您的 CSS 以使用上面引用的 box-shadow 方法。由于它是基于悬停方法构建的，因此需要进行更多调整。只需将百分比值从 0% 更改为 100%，您就应该很稳定。我还对 HTML 格式进行了更改，并删除了内部 flash div。

https://jsfiddle.net/q9n6adLp/

.flash-container {
    animation: grow 5s 2s linear forwards;
    width: 20px;
    height: 20px;
    z-index: 4;
  margin: 0 auto;
  box-shadow: 0 0 30vw 40vw rgba(241,244,0,1);
  .flash {
        background: radial-gradient(circle, white, transparent 10%);
    width: 100%;
    height: 100%;
        position: absolute;
        border-radius: 100%;
    }


}