.eyes {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 100%;

  text-align: center;

}

​

.eye {

  width: 240px;

  height: 120px;

  background: #fff;

  display: inline-block;

  margin: 40px;

  border-radius: 50%;

  position: relative;

  overflow: hidden;

}

​

.ball {

  width: 50px;

  height: 50px;

  background: #000;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  border: 10px solid #333;

}

const balls = document.getElementsByClassName("ball");

document.onmousemove = function() {

  let x = event.clientX * 100 / window.innerWidth + "%";

  let y = event.clientY * 100 / window.innerHeight + "%";

  // event.cilentX => get the horizontal coordinate of the mouse

  // event.cilentY => get the vertical coordinate of the mouse

  // window.innerWidth => get the browser width

  // window.innerHeight => get the browser height

​

  for(let i = 0; i < 2; i++) {

    balls[i].style.left = x;

    balls[i].style.top = y;

    balls[i].style.transform = "translate(-"+x+", -"+y+")";

  }

}