从页面中心开始增加 "blast" 个灯光动画

Question

使用 CSS 我想制作一个径向渐变圆的动画以扩展页面的整个长度和宽度（全白），然后反转此动画（[=26=] 到原始状态）。这应该看起来像从中心逐渐 "blast" 的白色，一旦达到完全 width/height 就会逐渐变成全白，但是我的白色背景开始过渡得太早了。我该如何实现？

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 以使用上面引用的框阴影方法。这需要做更多的调整，因为它是建立在悬停方法上的。只需将百分比值从 0% 更改为 100%，您就应该是可靠的。我还更改了 HTML 格式并删除了内部闪存 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%;
    }


}

从页面中心开始增加 "blast" 个灯光动画

Growing "blast" of light animation from center of page

css

keyframe

css-animations