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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
JavaScript实现多个物体同时运动
Mar 12 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代码保护--Zend Guard的使用详解
2013/06/03 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PHP编写RESTful接口
2016/02/23 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
简单的三步vuex入门
2018/05/20 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
Python中字典映射类型的学习教程
2015/08/20 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
animation和transition的区别
2020/10/12 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
党员培训思想汇报
2014/01/07 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
感恩主题班会教案
2015/08/12 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技