vue移动端实现红包雨效果

本文实例为大家分享了某视频剪辑软件实现红包雨效果的具体代码，供大家参考，具体内容如下

下面是代码：

模板div class=' ser _ home ' ul class=' red _ packet ' id=' red _ packet '模板v-for='(项目，索引)在lip arams ' Li : style=' { left : item。左边，animationduration :项。durtime，webkitanimationduration :项。durtime } ' : class='项。cls ' :数据-索引=' index ' @ webkitAnimationEnd=' remove domi : style=' { transform : item。转换，WebKittransform :项。transforms } '/I/a/Li/template/ul/div/templates导出默认值{ data(){ return { liparams 3360[]，timer: null，duration: 10000 //定义时间} }，挂载(){ this。startredpacket()}，methods: { /** *开启动画*/startRedPacket(){ let win=document。文档元素。客户端宽度| |文档。尸体。客户端宽度let left=parsent(数学。random()*(win-50)0)；让rotate=(parsent(数学。random()*(45-(-45))-45))' deg '；//旋转角度让音阶=(数学。random()*(12-8 1)8)* 0.1；//图片尺寸让DurTime=(数学。random()*(2.5-1.2 1)1.2)的；//时间1.2和1.2这个数值保持一样控制台。记录这个。利普拉姆。push({ left : left ' px '，cls: 'move_1 '，transforms : ' rotate(' rotate ')scale(' scales ')，dur time : dur time })setTimeout(()={//多少时间结束clearTimeout(this.timer)返回；}，这个。持续时间)这个。timer=setTimeout(()={ this。startredpacket()}，100) }，/** *回收数字正射影像图节点*/removeDom(e){ let target=e . CurrentTarget；文件。queryselector(' # red _ packet ').removeChild(目标)} } }/脚本！-添加"作用域"属性，将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-样式作用域lang="SCS ".ser _ home { width : 100%；高度： 100%;}.red _ packet { display:块；相对位置：飞越：隐藏；宽度： 100%;高度： 100%;i { width: 48px高度： 69px显示器：块；背景： URL('/红宝。png ')无重复；} li {绝对位置：动画师：全3s线性；top :-100 px；z指数： 10；move _ 1 {-网络工具包-动画： aim _ move 5s线性1前进；动画： aim _向前移动5s线性1;} }一个{显示：块；} } @关键帧aim _ move { 0% {-web kit-transform : translateY(0)；transform : translateY(0)；} 100% {-web套件-transform : translateY(120 VH)；transform : translateY(120 VH)；} }/样式效果图：

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