html、css、javascript 实现红包雨

先看看效果吧！

HTML代码：

<div id="wrapper">
    <img src="images/hb/petal1.png" >
</div>
<div id="modol">
    <div id="hb">
        <div id="text"></div>
        <div id="btn">继续抢红包</div>
    </div>
</div>

CSS代码：

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #fb9d3b;
    overflow: hidden;
}
/*
    animation  各参数意思
    关键帧动画名称
    动画执行时间
    动画延迟时间
    动画执行次数
    动画的执行速度函数
    动画执行方向  alternate  间隔的顺序 ( 0 到 100 到 0 到 100 )
                 reverse    反向运动   (100 到 0 )
                 reverse-alternate   反向间隔运动
    动画执行模式  forwards(动画停止在最后一个关键帧的位置)
                 backwards (动画第一个关键帧立即执行)
                 both(两者都 即立即作用第一个关键帧也停止在最后一个关键帧)
*/
#wrapper img {
    position: absolute;
    transform: translateY(-100%);        /*下落动画*/
    animation: dropDowm 3s forwards;     /*旋转动画*/
}
@keyframes dropDowm{
    0% {
        top: 0px;
        transform: translateY(-100%) rotate(0deg);   
    }
    100% {
        top: 110%;
        transform: translateY(0%) rotate(360deg);
    }
}

#modol {
    display: none;
}

#modol::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0, 0.5);
}

#hb {
    width: 350px;
    height: 450px;
    border-radius: 20px;
    background-color: #e7223e;
    color: #fad755;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-top: -225px;
    margin-left: -175px;
    font-size: 30px;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#btn {
    background-color: #fad755;
    color: #e7223e;
    font-size: 18px;
    margin-top: 10px;
    padding: 10px;
    border:none;
    outline: none;
    cursor: pointer;
}

JavaScript代码：

function init() {
    var dom = createDom(40);
    var wrapper = document.getElementById('wrapper');
    wrapper.appendChild(dom);
    bindEvent();
}

var totalMoney = 0;   //保存所有抢到的红包总金额
var delayTime = 0;
var lastImg = null;   //最后一张掉落的图片

//创建红包结构, num代表红包个数
function createDom(num) {
    var frag = document.createDocumentFragment();  //创建文档碎片
    for(var i = 0; i < num; i ++) {
        var img = new Image();
        img.src = './images/hb/petal' + ranNum(0,10) + '.png';
        img.style.left = ranNum(0, window.innerWidth) + 'px';      //让红包散列分布
        var delay = ranNum(0,100) / 10;
        img.style.animationDelay = delay + 's';                   //设置红包出现时间
        if(delayTime < delay) {
            delayTime = delay;
            lastImg = img;
        }
        //data-money
        img.dataset.money = ranNum(0,1000) / 100;     //设置每个红包的钱数
        frag.appendChild(img);
    }
    return frag;
}

//绑定点击事件
function bindEvent() {
    var wrapper = document.getElementById('wrapper'),
        imgList = document.getElementsByTagName('img'),
        modol = document.getElementById('modol'),
        text = document.getElementById('text'),
        btn = document.getElementById('btn');

    //点击红包事件
    addEvent(wrapper, 'mousedown', function(e) {      
        var event = e || window.event,
            target = event.target || event.srcElement,
            money = event.target.dataset.money;
        if(money) {
            text.innerText = '恭喜抢到红包' + money + '元';
            for(var i = 0, len = imgList.length; i < len; i ++) {
                imgList[i].style.animationPlayState = 'paused';
            }
            modol.style.display = 'block';
            totalMoney += Number(money);
        }
    });

    //点击继续抢红包按钮事件
    addEvent(btn, 'click', function() {
        modol.style.display = 'none';
        for(var i = 0, len = imgList.length; i < len; i ++) {
            imgList[i].style.animationPlayState = 'running';
        }
    });

　　//监听最后一个红包动画完成
    addEvent(lastImg, 'webkitAnimationEnd', function() {
        modol.style.display = 'block';
        text.innerText = '恭喜总共抢到了' + totalMoney.toFixed(2) + '元';
        btn.style.display = 'none';
    });
}

//min 到 max 之间的随机数
function ranNum(min, max) {
    return Math.ceil(Math.random()*(max - min) + min);
}

//兼容的 添加事件函数
function addEvent(elem, type, handle) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function() {
            handle.call(elem);
        })
    } else {
        elem['on' + type] = handle;
    }
}




init();

 

 

*:ஐ٩(๑´ᵕ`)۶ஐ:* 学习使我进步

欢迎留言讨论哦！