wenhua818/src/components/Fog.vue

<template>
  <div class="fog-box">
    <div class="fog"></div>
    <svg width="0" height="0" >
      <filter id="steam">
        <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
        <feDisplacementMap in="SourceGraphic" scale="180" />
      </filter>
    </svg>
  </div>
</template>

<style lang="less" scoped>

@fog-color: #787F78;
@fog-last-time: 20s;

.fog-box {
  position: absolute;
  z-index: 20;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // overflow-y: hidden;

  .fog{
    position: absolute;
    top: -400px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: -156px 492px 123px -252px @fog-color;
    filter: url(#steam);
    min-width: 600px;
    min-height: 600px;
    animation-name: fogAnimation;
    animation-duration: @fog-last-time;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    will-change: transform, opacity;
  }

  @keyframes fogAnimation {
    0%{
      transform: translate(-20%, -20%);
      opacity: 0;
    }
    50% {
      opacity: 0.8;
    }
    100%{
      transform: translate(60%, -40%);
      opacity: 0;
    }
  }
}

</style>