实习的效果如下：
具体代码如下
html部分：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>红包雨</title><link rel="stylesheet" href="./css/demo.css"><link rel="stylesheet" href="./css/index.css"></head><body><!-- 红包 --><ul class="redPaper"><!-- <li><a href="#"><img src="./images/hb_1.png" alt=""></a></li> --></ul><div class="backward"><span></span></div><script src="./js/jquery.min.js"></script><script src="./js/index.js"></script><script></script></body></html>
demo.css为初始化css,可以不加
index.css部分
body{width: 100%;height: 100%;background-image: url(../images/bj.jpg);background-repeat: no-repeat;background-size: cover;position: relative;}.redPaper{width: 100%;height: 100%;/* border: 1px solid black; */overflow: hidden;}.redPaper li {position: absolute;animation: all 3s linear;top:-100px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.redPaper li a{display: block;}.backward{width: 100%;background:#ccc;opacity: 0.5;position: absolute;top: 0;}.backward span{display: inline-block;width: 100px;height: 100px;color: #000;font-weight: bold;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;text-align: center;line-height: 100px;font-size: 1000%;}
index.js部分：
$(document).ready(function () {var win = (parseInt($('.redPaper').css('width'))) - 60;console.log(win)$(".redPaper").css("height", $(document).height());$(".backward").css("height", $(document).height());$("li").css({});// 点击确认的时候关闭模态层// $(".sen a").click(function(){// $(".mo").css("display", "none")// });var del = function () {nums++;//console.info(nums);//console.log($(".li" + nums).css("left"));$(".li" + nums).remove();setTimeout(del, 200)}var addRedPaper = function () {var hb = parseInt(Math.random() * (3 - 1) + 1);var randomW = parseInt(Math.random() * (70 - 30) + 20);var randomLeft = parseInt(Math.random() * win);var randomRotate = (parseInt(Math.random() * 45)) + 'deg';//console.log(rot)num++;$(".redPaper").append("<li class='li" + num + "' ><a href='javascript:;'><img src='images/hb_" + hb + ".png' data-num ='" + num + "'></a></li>");$(".li" + num).css({"left": randomLeft,});$(".li" + num + " a img").css({"width": randomW,"transform": "rotate(" + randomRotate + ")","-webkit-transform": "rotate(" + randomRotate + ")","-ms-transform": "rotate(" + randomRotate + ")", /* Internet Explorer */"-moz-transform": "rotate(" + randomRotate + ")", /* Firefox */"-webkit-transform": "rotate(" + randomRotate + ")",/* Safari 和 Chrome */"-o-transform": "rotate(" + randomRotate + ")" /* Opera */});$(".li" + num).animate({'top': $(window).height() + 20 }, 5000, function () {//删掉已经显示的红包this.remove()});//点击红包的时候弹出模态层$(".li" + num).click(function (e) {if (e.target.tagName == 'IMG') {console.log(e.target.dataset.num)}});setTimeout(addRedPaper, 200)}//增加红包var num = 0;setTimeout(addRedPaper, 3000);//倒数计时var backward = function () {numz--;if (numz > 0) {$(".backward span").html(numz);} else {$(".backward").remove();}setTimeout(backward, 1000)}var numz = 4;backward();})
