vue 在移动端实现红包雨 (兼容性好)
![](/assets/blank.gif)
<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}"
<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 在移动端实现红包雨 (兼容性好)相关推荐
- android实现红包雨效果,vue移动端实现红包雨效果
这篇文章主要为大家详细介绍了vue移动端实现红包雨效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现红包雨效果的 ...
- php 红包雨,vue移动端实现红包雨效果
本文实例为大家分享了vue实现红包雨效果的具体代码,供大家参考,具体内容如下 下面是代码: :class="item.cls" :data-index="index&qu ...
- JS 实现红包雨效果,倒计时开红包 兼容移动端
本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下: JS代码 function randomNum(minNum, maxNum) {switch (argum ...
- 神武3手游微信月礼包服务器,千万红包雨豪礼送不停 《神武3》端手游今日同步上线...
<神武3>双端今日(11月24日)同步上线,公测盛典活动全面开启!新服齐开,还有海量礼包,千万红包雨以及神兽.iPAD等各种大礼等你来拿! <神武3>今日公测 公测新服齐开 千 ...
- 红包html页面,JavaScript Html实现移动端红包雨功能页面
本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下 实现效果如下: 具体代码如下 html部分: 红包雨 demo.css为初始化css,可以不加 index.c ...
- PC端红包雨特效之前端性能与技术选型
1.前端性能影响因素: 定义: 前端性能,即页面性能,简单来说就是能看到页面内容的时间以及可以开始在页面上操作的时间. 浏览器显示页面基本原理: 获取 HTML 文档及样式表文件 解析成对应的树形数据 ...
- canvas 红包雨_天猫双十一怎么买省钱?京东双十一红包口令淘宝双十一活动攻略...
每年的双十一都是全民狂欢,又到了一年一度的十一月份了,不知道大家有没有感觉现在网购的气氛很浓烈呢?说起双十一,大家都知道有各种各样的红包可以领取,今天这篇文章就给大家介绍一下天猫双十一有哪些红包可以领 ...
- 小程序中关于红包雨的实现
一.原型依据 在我这个项目中小程序端所需要实现的只有红包雨的下落动画和通屏背景图的兼容,关于红包点击金额的计算是由后端实现的.首先来看下需要实现的效果图. 二.实现代码 首先是第一次进入的页面,在这个 ...
- 电商红包雨是如何实现的?拿去面试用(典型高并发)
Hollis的新书限时折扣中,一本深入讲解Java基础的干货笔记! 想必大家应该都点过红包雨,就是各大电商大促时候都会搞的那个活动. 那具体如何实现红包雨的功能呢?我们来看下勇哥的分享. 我服务的一家 ...
最新文章
- 百度地图轨迹回放,自定义路书,边走边画线
- 4 个 MySQL 优化工具 AWR,帮你准确定位数据库瓶颈!
- 软件调试学习笔记(六)—— 硬件断点
- AC日记——[SDOI2010]大陆争霸 洛谷 P3690
- 1583. 统计不开心的朋友
- ASP.NET站点导航(五)
- 搭建ceph单节点对象存储服务器
- linux清除软件配置文件,Linux清除已删除软件包的配置文件命令瞎总结
- C语言目录文件操作补充
- Vector和Arraylist的区别
- openmeeting开发心得及相关文档
- 商城项目html pc,Vue实战篇(PC端商城项目)
- MASM32汇编SDK安装
- 在线超级外链发布工具
- 2020杭电多校第三场部分题解(1004, 1005, 1006, 1009)
- 开发板BMP图片显示(6818开发板)
- Java五子棋(2)
- 状压dp、数位dp、概率dp
- Xunit.net 单元测试学习——按顺序测试
- 《RCLane:Relay Chain Prediction for Lane Detection》论文笔记
热门文章
- 初识EMC元器件(六)——磁珠的参数解读及选型应用
- android studio 安装genymotion模拟器教程
- apereo cas开发_统一认证 - Apereo CAS 小试
- from math import *
- 温控系统c语言源代码,模糊PID控制温控系统设计C语言程序代码
- 今日头条的排名算法_3分钟看懂今日头条算法原理
- dct变换的主要优点有哪些_变速箱都有哪些类型?各自的优缺点是什么?手自一体很先进吗?...
- 免费开源Epub阅读器Koodo Reader Mac
- Flutter —— 为所有屏幕构精美应用
- Jieba库使用和好玩的词云