<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>