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

背景图 动态飘动效果"/>

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 + 1return Math.floor(Math.random() * (max - min) + min)
},

}