css_扩散动效

• html

<div id="modelContainer" class="init">
  <div class="mask"></div>
  <div class="model_content">
    <div class="attention_container">
      <div class="dot">
        <div class="iconfont icon-question"></div>
      </div>
      <div class="wave"></div>
    </div>
    <div class="hint">活动已结束</div>
    <div class="btn_close">关闭</div>
  </div>
</div>

• css

& > #modelContainer {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  overflow: hidden;
  &.hidden {
    animation: hidden 0.25s ease forwards;
  }
  &.show {
    animation: show 0.25s ease forwards;
  }
  &.init {
    opacity: 0;
    z-index: -10;
  }
  & > .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.6;
  }
  & > .model_content {
    width: 90%;
    background-color: #fff;
    position: absolute;
    z-index: 101;
    border-radius: 10px;
    text-align: center;
    &.hidden {
      animation: contentHidden 0.25s ease forwards;
    }
    &.show {
      animation: contentShow 0.25s ease forwards;
    }
    @keyframes contentHidden {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-150px);
      }
    }
    @keyframes contentShow {
      0% {
        transform: translateY(-150px);
      }
      100% {
        transform: translateY(0);
      }
    }

    & > .attention_container {
      width: 100%;
      height: 150px;
      position: relative;
      & > .dot {
        width: 50px;
        height: 50px;
        background-color: rgb(255, 234, 96);
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 25px);
        left: calc(50% - 25px);
        animation: dotMove 1.5s linear alternate infinite;
        & > .iconfont {
          font-size: 30px;
          color: #fff;
          font-weight: 700;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      & > .wave {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 25px);
        left: calc(50% - 25px);
        box-shadow: 0 0 10px 0 rgb(255, 234, 96) inset;
        animation: waveMove 1s linear infinite;
      }
      @keyframes dotMove {
        0% {
          transform: scale(1);
        }
        100% {
          transform: scale(1.2);
        }
      }
      @keyframes waveMove {
        0% {
          transform: scale(1);
          box-shadow: 0 0 10px 0 rgb(255, 234, 96) inset;
          opacity: 1;
        }
        100% {
          transform: scale(1.8);
          box-shadow: 0 0 40px 0 rgb(255, 234, 96) inset;
          opacity: 0;
        }
      }
    }
    & > .hint {
      color: #666;
    }
    & > .btn_close {
      margin-top: 20px;
      position: relative;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #999;
      font-size: 18px;
      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background-color: #999;
        transform: scaleY(0.5);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }

  @keyframes hidden {
    0% {
      opacity: 1;
      z-index: 100;
    }
    100% {
      opacity: 0;
      z-index: -10;
    }
  }
  @keyframes show {
    0% {
      opacity: 0;
      z-index: -10;
    }
    100% {
      opacity: 1;
      z-index: 100;
    }
  }
}

• 效果