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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
javascript 学习之旅 (1)
Feb 05 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
js调试工具Console命令详解
Oct 21 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
微信小程序组件传值图示过程详解
Jul 31 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
PHP语法小结之基础和变量
2015/11/22 PHP
javascript demo 基本技巧
2009/12/18 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python简明入门教程
2015/08/04 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python写程序统计词频的方法
2019/07/29 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
大课间活动制度
2014/01/18 职场文书
ktv好的活动方案
2014/08/15 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
市级三好学生评语
2014/12/29 职场文书