SOURCE

var oBox = document.getElementById("box");
oBox.addEventListener("mousemove",function(e){
  var oBubble = document.createElement("div");
  oBubble.className = "bubble";
  oBubble.style.left = e.clientX + "px";
  oBubble.style.top = e.clientY + "px";
  oBox.appendChild(oBubble);
  var i = 0,
    timer = setInterval(function(){
        i+=5;
        oBubble.style.opacity = (50 - i)/50;
        oBubble.style.width = (20 + i)+"px";
        oBubble.style.height = (20 + i)+"px";
  },30)
  setTimeout(function(){
    clearInterval(timer);
    oBox.removeChild(oBubble);
  },300)
})

<div id="box"></div>

html,body{width: 100%;height: 100%;}
*{margin: 0;padding: 0;}
#box{
  width: 100%;
  height: 100%;
  position: relative;
}
.bubble{
  width: 20px;
  height: 20px;
  border: 2px solid #4169E1;
  border-radius: 50%;
  position: absolute;
}