android实现红包雨效果,vue移动端实现红包雨效果

这篇文章主要为大家详细介绍了vue移动端实现红包雨效果，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

本文实例为大家分享了vue实现红包雨效果的具体代码，供大家参考，具体内容如下

【图片暂缺】

下面是代码：

代码如下：

export default {

data () {

return {

liParams: [],

timer: null,

duration: 10000 // 定义时间

}

},

mounted () {

this.startRedPacket()

},

methods: {

/**

* 开启动画

*/

startRedPacket() {

let win = document.documentElement.clientWidth || document.body.clientWidth

let left = parseInt(Math.random() * (win - 50) + 0);

let rotate = (parseInt(Math.random() * (45 - (-45)) - 45)) + "deg"; // 旋转角度

let scales = (Math.random() * (12 - 8 + 1) + 8) * 0.1; // 图片尺寸

let durTime = (Math.random() * (2.5 - 1.2 + 1) + 1.2) + 's'; // 时间 1.2和1.2这个数值保持一样

console.log(durTime)

this.liParams.push({left: left+'px', cls: 'move_1', transforms: 'rotate('+ rotate +') scale('+ scales +')', durTime: durTime})

setTimeout( () => { // 多少时间结束

clearTimeout(this.timer)

return;

}, this.duration)

this.timer = setTimeout( () => {

this.startRedPacket()

},100)

},

/**

* 回收dom节点

*/

removeDom (e) {

let target = e.currentTarget;

document.querySelector('#red_packet').removeChild(target)

}

}

}

.ser_home {

width: 100%;

height: 100%;

}

.red_packet {

display: block;

position: relative;

overflow: hidden;

width: 100%;

height: 100%;

i {

width: 48px;

height: 69px;

display: block;

background: url('/hongbao.png') no-repeat;

}

li {

position: absolute;

animation: all 3s linear;

top:-100px;

z-index: 10;

&.move_1 {

-webkit-animation: aim_move 5s linear 1 forwards;

animation: aim_move 5s linear 1 forwards;

}

}

a {

display: block;

}

}

@keyframes aim_move {

0% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

100% {

-webkit-transform: translateY(120vh);

transform: translateY(120vh);

}

}

效果图：

【图片暂缺】

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持512笔记。

注：关于vue移动端实现红包雨效果的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：vue.js