页面鼠标点击，模拟打气球效果
页面鼠标点击，模拟打气球效果<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
*{
margin: 0;padding: 0
}
body{
overflow: hidden;
background:#ccc;
}
.balloon{
position: absolute;
top: 0px;
left: 0px;
width: 160px;
height: 160px;
background: #faf9f;
border-radius: 160px 160px 64px 160px;
transform: rotate(45deg);
box-shadow:-8px -8px 80px -8px #873940 inset,18px 18px 24px pink;
/*内阴影横向，纵向，羽化，影子大小，内阴影，两套阴影*/
}
/*伪元素，before和after*/
.balloon::after{
position: absolute;/*定位*/
bottom: -5px;
right: -2px;
content: "";/*激活，内容为空必须有*/
width: 0px;
height: 0px;
background:transparent;
border: 8px solid transparent;
border-right-color: rgba(240,98,122,0.5);
transform: rotate(45deg);
border-radius: 16px;
}
</style>
</head>
<body>
<!-- <div class="balloon"></div> -->
</body>
<script type="text/javascript">
// 1利用js动态生成div 初始化节点；2气球动起来；3点击气球运动；4爆炸动画
var num=10;//初始气球数量
var bW=160;
var wW=window.innerWidth;//宽度
var wH=window.innerHeight;//高度
var timer=null;//初始化定时器
init(num);
timer=setInterval(move,1000/30);//持续气球向上飞
//初始化气球
function init(num){
for(var i=0;i<num;i++){
var randomX=Math.random()*wW-bW;
randomX=Math.max(0,randomX);
var randomY=Math.random()*wH;
var oBalloon=document.createElement('div');
oBalloon.className='balloon';
oBalloon.style.left=randomX+"px";
oBalloon.style.top=wH-bW+"px";
oBalloon.speed=Math.random()*5+1;
document.body.appendChild(oBalloon);
}
}
//
function move(){
var oBalloons=document.querySelectorAll('.balloon');
for(var i=0,len=oBalloons.length;i<len;i++){
oBalloons.style.top=
oBalloons.offsetTop-
oBalloons.speed+"px";
oBalloons.onclick=function(){
boom.call(this,function(){
clearInterval(this.timer);
this.parentNode.removeChild(this);
}.bind(this));
// 主动执行boom的时候改变this指向
}
}
// document.body.addEventListener('click',function(e){
// if(e.target.className.toLowerCase()==='balloon'){
// // 可以传递this，但是不好
// boom.call(e.target,function(){
// clearInterval(this.timer);
// this.parentNode.removeChild(this);//移除自身
// }.bind(this));
// // e.target.parentNode.removeChild(e.target);
// // init(1);
// }
// },false)
}
// 闭包模块开发用上
function boom(cb){
this.timer=setInterval(function(){
// 永远指向了window
if(this.offsetWidth<10){
cb&&cb();init(1);
}
this.speed++;
this.style.width=this.offsetWidth-10+'px';
this.style.height=this.offsetHeight-10+'px';
}.bind(this),1000/60);
//
}
</script>
</html>采用html+css实现效果，用于学习demo
页:
[1]