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


}

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

1 个答案: