漂浮物vue3，只占2%gpu

<template>
  <div id="floatImg"></div>
</template>
<script>
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent({
  name: 'float',
  props: {
    floatImage: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const innerWidth = ref(375);
    onMounted(() => {
      document.addEventListener('visibilitychange', function () {
        switch (document.visibilityState) {
          case 'visible': // alert("处于正常打开");
            $('#floatImg').empty();
            break;
        }
      });
      setInterval(() => {
        let left;
        if (innerWidth.value > 375) {
          left = Math.random() * innerWidth.value;
        } else {
          left = Math.random() * 375;
        }
        let src = props.floatImage;
        isSnow(left, src);
      }, 1000);
    });
    const isSnow = (left, src) => {
      let floatImg = document.getElementById('floatImg');
      let img = document.createElement('img');
      img.className = 'roll roll' + Math.floor(Math.random() * 3 + 3);
      img.src = src;
      img.style.width = Math.random() * (1.1 - 0.7) + 0.7 + 'rem';
      img.style.height = 'auto';
      img.style.left = left + 'px';
      img.style.bottom = '100%';
      floatImg.appendChild(img);
      setTimeout(() => {
        floatImg.removeChild(img);
      }, 20000);
    };
    return {
      isSnow,
      innerWidth
    };
  }
});
</script>

<style>
#floatImg {
  width: 375px;
  max-width: 375px;
  overflow: hidden;
}
@keyframes mysnow {
  0% {
    bottom: 100%;
    transform: rotate(0deg);
  }
  100% {
    bottom: -10%;
    transform: rotate(-30deg);
  }
}
@-webkit-keyframes mysnow {
  0% {
    bottom: 100%;
    -webkit-transform: rotate(0deg);
  }
  100% {
    bottom: -10%;
    -webkit-transform: rotate(-30deg);
  }
}
@-moz-keyframes mysnow {
  0% {
    bottom: 100%;
    -moz-transform: rotate(0deg);
  }
  100% {
    bottom: -10%;
    -moz-transform: rotate(-30deg);
  }
}
@-ms-keyframes mysnow {
  0% {
    bottom: 100%;
    -ms-transform: rotate(0deg);
  }
  100% {
    bottom: -10%;
    -ms-transform: rotate(-30deg);
  }
}
@-o-keyframes mysnow {
  0% {
    bottom: 100%;
    -o-transform: rotate(00deg);
  }
  100% {
    bottom: -10%;
    -o-transform: rotate(-30deg);
  }
}
.roll5 {
  animation: mysnow 20s linear;
  -webkit-animation: mysnow 20s linear;
  -moz-animation: mysnow 20s linear;
  -ms-animation: mysnow 20s linear;
  -o-animation: mysnow 20s linear;
}
.roll4 {
  animation: mysnow 16s linear;
  -webkit-animation: mysnow 16s linear;
  -moz-animation: mysnow 16s linear;
  -ms-animation: mysnow 16s linear;
  -o-animation: mysnow 16s linear;
}
.roll3 {
  animation: mysnow 12s ease-out;
  -webkit-animation: mysnow 12s ease-out;
  -moz-animation: mysnow 12s ease-out;
  -ms-animation: mysnow 12s ease-out;
  -o-animation: mysnow 12s ease-out;
}
.roll {
  position: fixed;
  margin-left: calc(50vw - (375px / 2));
  z-index: 1;
}
</style>