先看一下效果截图。
这种一般在手机APP上，还有微信上面可能会看到。实现起来也不难，只需要几张图片即可。
代码实现如下。
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="wyh"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> <!--在iPhone 手机上禁止了把数字转化为拨号链接--> <meta content="telephone=no" name="format-detection" /> <!--删除默认的苹果工具栏和菜单栏--> <meta content="yes" name="apple-mobile-web-app-capable"> <!-- 网站开启对web app程序的支持，在web app应用下状态条（屏幕顶部条）的颜色，默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）--> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>移动端-红包雨</title> <link href="lib/minireset.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="pack_box"> <!--开始动画框--> <div class="start_box"> <span></span> </div> <!--红包框--> <ul class="redpack_box"></ul> <!--弹出框--> <div class="pop_box"> <div class="pop_con"> <img src="img/gx.png" alt=""> <h3>恭喜你，获得红包三元</h3> <a href="javascript: void(0);">立即领取</a> </div> </div> </div> </body> <script src="lib/jquery.min.js"></script> <script src="js/index.js"></script> </html>
CSS
body,html{ width: 100%; height: 100%; } *{ box-sizing: border-box; } .pack_box{ width: 100%; height: 100%; background: url("../img/bj.jpg") no-repeat top left; background-size: 100%; overflow-y: hidden; position: relative; } /* 开始动画框 */ .start_box{ width: 100%; position: absolute; background: #ccc; opacity: 0.5; } .start_box span{ display: inline-block; width: 100px; height: 100px; color: #000; font-weight: bold; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; text-align: center; line-height: 100px; font-size: 1000%; } /* 红包框 */ .redpack_box{ width: 100%; height: 100%; overflow: hidden; } .redpack_box li{ position: absolute; animation: all 3s linear; top: -100px; } .redpack_box li a{ display: block; } /* 弹出框 */ .pop_box{ display: none; position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3); z-index: 100; } .pop_box .pop_con { width: 70%; height: 160px; border-radius: 5px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .pop_box .pop_con img{ width: 70%; height: 120px; position: absolute; top: 0; left: 0; right: 0; bottom: 80px; margin: auto; vertical-align: top; } .pop_box .pop_con h3{ color: red; z-index: 999; position: absolute; width: 100%; text-align: center; font-weight: bold; top: 80px; font-size: 120%; } .pop_box .pop_con a{ width: 36%; height: 38px; position: absolute; top: 120px; z-index: 999; text-decoration: none; color: #fff; background: #177ad8; text-align: center; line-height: 38px; font-size: 15px; border-radius: 6px; border: 1px solid #177ad8; left: 0; right: 18px; bottom: 0; margin: auto; }
JavaScript
/** * Created by Administrator on 2017/7/5. * 红包雨 */ $(document).ready(function(){ // 页面加载完毕之后设置的初始样式 initPage(); //开始动画 startAnimation(); //添加红包 setTimeout(add,3000); }); function initPage(){ $(".start_box").css("height",$(document).height()); $(".redpack_box").css("height",$(document).height()); } function startAnimation(){ var num =4; var startA =function(){ num--; if(num > 0 ){ $(".start_box span").html(num); }else{ $(".start_box").remove(); } setTimeout(startA,1000); } startA(); } //随机数的方法 function randomNum(startNum,endNum){ return parseInt(Math.random() * ((endNum+1) - startNum)+startNum); } var nums =0; var wid =parseInt($(".redpack_box").width()) - 60; function add(){ var ranImg =randomNum(1,2); //此随机数用来切换图片用。 var ranWidth =randomNum(20,60); //此随机数用来设置红包的宽度。 var ranLeft =randomNum(0,wid); //用来设置红包的left值。 var ranRotate =randomNum(-45,45); //设置红包的rotate值。 nums++; var redpackHTML ="<li class='li"+nums+"'>" + "<a href='javascript: void(0);'>" + "<img src='img/hb_"+ranImg+".png'></a></li>"; $(".redpack_box").append(redpackHTML); $(".li"+nums).css("left",ranLeft); $(".li"+nums+" img").css({ "width": ranWidth+"px", "transform": "rotate("+ranRotate+"deg)", "-ms-transform": "rotate("+ranRotate+"deg)", /* Internet Explorer */ "-moz-transform": "rotate("+ranRotate+"deg)", /* Firefox */ "-webkit-transform": "rotate("+ranRotate+"deg)",/* Safari 和 Chrome */ "-o-transform": "rotate("+ranRotate+"deg)" /* Opera */ }); $(".li"+nums).animate({"top":$(document).height()+20},5000,function(){ //删除掉落的红包 $(this).remove(); }); $(".li"+nums).click(function(){ $(".pop_box").css("display","block"); }); setTimeout(add,500); } $(".pop_con a").click(function(){ $(".pop_box").css("display", "none"); });
实现原理：
我是用 li 存放红包的图片的，设置样式 top值为负值，这样生成每个红包的时候就是屏幕的上方出现。
接下来就是生成红包，在这之前先写了一个生成随机数的方法（总感觉有问题）
function randomNum(startNum,endNum){ return parseInt(Math.random() * ((endNum+1) - startNum)+startNum); }
这个随机数的方法就是用来生成四个随机数，分别用来切换要显示的图片，设置图片的宽度，设置 li 的left值，设置红包的 rotate 值。
接着生成 li，给每个 li 加上动画，并监听位置信息，当超出屏幕的高度的时候删除此元素。
最后加个定时器就行了。
效果地址：https://wyhstar.github.io/redPacket/index.html
代码地址：https://github.com/wyhstar/redPacket
可以用手机查看。（有改善的地方请指教）