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对id中含有特殊字符的转义处理示例
Sep 06 Javascript
JavaScript中对象介绍
Dec 31 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHP面向对象编程快速入门
2006/12/14 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP中防止SQL注入实现代码
2011/02/19 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
会员活动策划方案
2014/08/19 职场文书
党性心得体会
2014/09/03 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
小学思想品德教学反思
2016/02/24 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python