html、css、javascript 实现红包雨

一个努力奋斗的人 發表於 2020-2-6 07:44:00

先看看效果吧！
<img src="https://img2018.cnblogs.com/common/1543983/202002/1543983-20200206080357150-1653696339.gif">
HTML代码：
<div class="cnblogs_code">
<pre><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>
</pre>
</div>
CSS代码：
<div class="cnblogs_code">
<pre>* {
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;
}</pre>
</div>
JavaScript代码：
<div class="cnblogs_code">
<pre>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.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.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();</pre>
</div>
 
 
*:ஐ٩(๑´ᵕ`)۶ஐ:* 学习使我进步
欢迎留言讨论哦！
 <img src="https://common.cnblogs.com/images/loading.gif">
  
来源：https://www.cnblogs.com/hjysunshine/p/12267560.html

頁: [1]

琼殿技术论坛's Archiver

html、css、javascript 实现红包雨