css - 从页面中心开始生长 "blast"光动画

Question

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

跨界

    .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%;
    }


}