cursor css

<div class="rotar"></div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

*,

*:after,

*:before {

  box-sizing: border-box;

}

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

.rotar{

  background:rgba(50,255,80,.5);

  border-radius:100%;

  cursor:none;

  width:40px;

  height:40px;

  transform:translateZ(0px);

}

.rotar:active{

  width:42px;

  height:42px;  

}

.rotar:hover{

  background:rgba(50,255,80,.5);

  border:0px solid rgba(50,255,80,.5);

  animation:pulso .8s linear infinite;

}

@keyframes pulso{

  0%{

    border:0px solid rgba(50,255,80,.5);

  }

  50%{

    border:5px solid rgba(50,255,80,.5);

  }

  70%{

    border:5px solid rgba(50,255,80,.5);

  }

  100%{

    border:0px solid rgba(50,255,80,.5);

  }

}

$('body').mousemove(function(e){

  var rotar = $('.rotar'),

      ancho = rotar.width(),

      alto = rotar.height(),

      W = ancho/2,

      H = alto/2,

      Y = (e.pageY - W),

      X = (e.pageX - H);

  rotar.css(

        'transform', 'translateY(' + Y + 'px) translateX(' + X + 'px)'

  );

});