<style>
{margin:0;padding:0;}
body{background:#434343;overflow:hidden}
.balloon{
position:absolute;
left:0;
top:0;
margin:auto;
width:160px;
height:160px;
圓角: 左上 右上 右下 左下 
/
css3旋轉 順時針旋轉45度 
/
background:#faf9f9;
x軸的位置 y軸的位置 影子擴散程度 模糊度 顏色 
/
}
.balloon:after{
偽元素的內容 
/
display:block;
position:absolute;

right:0px;
width:0px;
height:0px;
border:8px solid #dbbdbd;
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
transform:rotate(45deg);
border-radius:16px;
}
#wrap{
width:200px;
height:200px;
background:red;
}
</style>

<script>
 var num = 10; // 聲明遍歷num 為div的數量
 //var oBody = document.querySelector('body'); //h5 api 獲取元素的方法
 var oBody=document.documentElement || document.body; //body獲取兼容性寫法
 var wW=window.innerWidth; //獲取瀏覽器窗口的寬度
 var wH=window.innerHeight; //獲取瀏覽器窗口高度
 var timer=null; //初始化定時器變量
 init(num);
 function init(num){
 for(var i=0;i<num;i++){ //for循環 循環加工廠
 var randomL=Math.random()*wW; // 隨機left范圍
 randomL=Math.min(wW-160,randomL); //規范left位置
 var balloon = document.createElement('div'); //用js生成標簽
 balloon.className='balloon'; //給創建的div元素設置類名
 balloon.style.left=randomL+'px'; //改變元素的樣式中的left的值
 balloon.style.top=wH+'px';
 balloon.speed=Math.random()*5+1; //自定義屬性 創建元素的時候添加
 oBody.appendChild(balloon); //body中添加 元素對象
 }
 }
 timer=setInterval(function(){
 var oBall=document.querySelectorAll('.balloon');//獲取頁面所有的氣球
 for(var i=0,len=oBall.length;i<len;i++){
 oBall[i].style.top = oBall[i].offsetTop-oBall[i].speed+'px';
 oBall[i].onclick=function(){ //誰 觸發了什么 誰做了什么事情
 crash(this,function(xxx){
 clearInterval(xxx.timer); //清除動畫定時器
 xxx.parentNode.removeChild(xxx);
 });
 //this.parentNode.removeChild(this); 
 init(1);
 }
 }
 },30);
 function crash(ele,cb){ //被點擊之后撒氣效果
 ele.timeouter=setTimeout(function(){
 cb&&cb(ele);
 },500)
 ele.timer=setInterval(function(){
 ele.speed++; //加速度自增
 ele.style.top=ele.offsetTop-ele.speed+'px'; //加速逃離
 ele.style.width=ele.offsetWidth-10+'px'; //寬度減少
 ele.style.height=ele.offsetHeight-10+'px'; //高度減少
 },30)
 }
</script>