vue 实现背景图 动态飘动效果

html  部分

<div id="F-dynamicbg-box">
  <div style="z-index: 100"></div>
  <div style="z-index: 100"></div>
  <div style="z-index: 100"></div>
  <div style="z-index: 100"></div>
  <div style="z-index: 100"></div>
  <div style="z-index: 100"></div>
  <div style="z-index: 100"></div>
  <div style="z-index: 100"></div>
  <div style="z-index: 100"></div>
  <div style="z-index: 100"></div>
</div>

css部分

#F-dynamicbg-box {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
#F-dynamicbg-box > div {
  z-index: -9999;
  background-color: rgba(255,255,255,.1);
  position: absolute;
  top: 105vh;
  //infinite   表示循环
  animation: dynamicDiv 20s linear infinite;
}
#F-dynamicbg-box > div:nth-of-type(1) { animation-delay: 1s }//等待几秒开始动画
#F-dynamicbg-box > div:nth-of-type(2) { animation-delay: 3s }
#F-dynamicbg-box > div:nth-of-type(3) { animation-delay: 6s }
#F-dynamicbg-box > div:nth-of-type(4) { animation-delay: 9s }
#F-dynamicbg-box > div:nth-of-type(5) { animation-delay: 12s }
#F-dynamicbg-box > div:nth-of-type(6) { animation-delay: 4s }
#F-dynamicbg-box > div:nth-of-type(7) { animation-delay: 15s }
#F-dynamicbg-box > div:nth-of-type(8) { animation-delay: 18s }
#F-dynamicbg-box > div:nth-of-type(9) { animation-delay: 20s }
#F-dynamicbg-box > div:nth-of-type(10) { animation-delay: 16s }


@keyframes dynamicDiv {
  form { top: 105vh; transform: scale(1.2); }
  to { top: -13vh; transform: scale(1) rotate(120deg); }
}

mounted部分

mounted() {

  //生成背景的方块 用$nextTick防止F-dynamicbg-box里面内容没有挂载完
  this.$nextTick(function () {
    var box = document.getElementById('F-dynamicbg-box');
    if(box){
      var div = box.getElementsByTagName('div');
    var math = [0,3];
    var width = document.documentElement.clientWidth || document.body.clientWidth;
    var height = document.documentElement.clientHeight || document.body.clientHeight;
    for (var i=0;i<div.length;i++) {
      math[1] = this.randomNum(100,40,9)
      if(math[1] != math[2]){
        div[i].style.width = math[1] + 'px';
        div[i].style.height = math[1] + 'px';
        math[2] = math[1];
      }
    }
    for(var i=0;i<div.length;i++){
      div[i].style.left = this.randomNum(85,15,8) + 'vw';
      div[i].style.transform = "rotate(" + this.randomNum(360,5,9) + "deg)";
    }
    }
  })
},

methods：{

//生成随机数
randomNum (min, max) {
  max = max + 1
  return Math.floor(Math.random() * (max - min) + min)
},

}