SOURCE

window.onload = function(){
  var num = 10;
var wW = window.innerWidth;
var wH = window.innerHeight;
var bW = 160;
var timer = null;
init();
timer = setInterval(function() {
  move();
},
30);
function move() {
  // var oBallons=document.getElementsByClassName('ballon');
  var oBallons = document.querySelectorAll('.ballon');
  for (var i = 0,
  len = oBallons.length; i < len; i++) {
    oBallons[i].style.top = oBallons[i].offsetTop - oBallons[i].speed + 'px';

    oBallons[i].onclick = function() {
      boom.call(this, function() {
        clearInterval(this.timer);
        this.parentNode.removeChild(this);
      }); //重点！
    }
  }
}

function boom(cb) {
  this.timer = setInterval(function() {
    if (this.offsetWidth < 10) {
      cb && cb.call(this);
    }
    this.speed++;
    this.style.width = this.offsetWidth - 10 + 'px';
    this.style.height = this.offsetHeight - 10 + 'px';
    this.style.top = this.offsetTop - this.speed + 'px;'
  }.bind(this), 30)
}

function init() {
  for (var i = 0; i < 10; i++) {
    var randomX = Math.floor(Math.random() * wW) - bW;
    randomx = Math.max(0, randomX); //left 最小为0
    var oBallon = document.createElement('div');
    oBallon.className = 'ballon';
    oBallon.style.left = randomX + 'px';
    oBallon.style.top = wH - bW + 'px';
    oBallon.speed = Math.random() * 4 + 1;
    document.body.appendChild(oBallon);
  }
}
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  overflow: hidden;
  background: #222;
}

.ballon {
  position: absolute;
  top: 200px;
  left: 200px;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  background: #faf9f9;
  box-shadow: -8px -8px 80px -8px rgba(124, 80, 122, 0.6) inset;
  border-radius: 160px 160px 64px 160px;
  transform: rotate(45deg);
}

.ballon:after {
  position: absolute;
  bottom: 0px;
  right: 0px;
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #873940;
  transform: rotate(45deg);
  border-radius: 50%
}