vue移动端实现红包雨效果


Posted in Javascript onJune 23, 2020

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

vue移动端实现红包雨效果

下面是代码:

<template>
 <div class="ser_home">
 <ul class="red_packet" id="red_packet">
  <template v-for="(item, index) in liParams">
  <li :style="{ left: item.left, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}" 
 :class="item.cls" :data-index="index" @webkitAnimationEnd="removeDom">
   <a href='javascript:;'>
   <i :style="{ transform: item.transforms, webkitTransform: item.transforms}"></i>
   </a>
  </li>
  </template>
 </ul>
 </div>
</template>


<script>
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)
 }
 }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.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);
 }
 }

</style>

效果图:

vue移动端实现红包雨效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 #Javascript
微信小程序实现红包雨功能
Jul 11 #Javascript
小程序ios音频播放没声音问题的解决
Jul 11 #Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 #Javascript
微信小程序实现发红包功能
Jul 11 #Javascript
vue框架搭建之axios使用教程
Jul 11 #Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 #Javascript
You might like
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
简单的PHP留言本实例代码
2010/05/09 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php学习笔记之面向对象
2014/11/08 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
护士实习自我鉴定
2013/10/22 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
教师专业自荐信
2014/05/31 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
行为习惯主题班会
2015/08/14 职场文书
初中地理教学反思
2016/02/19 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
教你利用python实现企业微信发送消息
2021/05/23 Python