script.js

var colors = ['#580201','#d9bd6a','#d9d49a','#037f8b','#025e73'];
var elems = [];
var body = document.getElementsByTagName('body')[0];
var xElems = window.innerWidth/30,
    yElems = body.clientHeight/10,
    fragment = document.createDocumentFragment();
    
for(var j = 0 ; j<yElems;j++){
  for(var i = 0 ; i<xElems;i++){
    
    var elem = document.createElement('div');
    
    if(i%2==0){
      elem.classList.add('bs');
    }else{
      elem.classList.add('bs1');
    }
     
    elem.style.top = j*30-20+'px';    
    elem.style.left = i*30-20+'px';    
    elem.style.zIndex =100- j+''+i;
    elem.style.backgroundColor = colors[Math.round(Math.random()*4)];
    fragment.appendChild(elem); 
    elems.push(elem);
  }
}
function randomize(){
    var divs = elems.length;
    var pos = Math.round(Math.random()*divs);
    elems[pos].classList.add('anim');
} 
body.appendChild(fragment);
setInterval(randomize,100);

style.css

html{width:100%;height:100%;}
body{width:100%;height:100%;overflow:hidden;background:#34729b;}
.bs{
 width:40px;
  height:40px;
  border-radius:50%;
  box-shadow:0 0 20px;
  position:absolute;
  transform-origin:center center;
  transition:all 1s;
}
.bs1{
  width:40px;
  height:40px;
  box-shadow:0 0 20px;
  border-radius:5px;
  position:absolute;
  transform-origin:center center;
  transform:rotate(45deg);
}
.anim {	
	animation:transform1 2s linear;
}
@keyframes transform1{
  50%{
    transform:rotate3d(1, -1, 0, 60deg);
    background:black;
  }
}