JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<h1>Move your mouse!!</h1>
<a href="#"></a>

<!-- (Firefox win!) Opera, Chrome and Safari cannot detect the mouse over on the circle when the animation ends (windows7, mac Mountain lion) -->

CSS

html {
    background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 960, from(#D16D15), to(#853C08)) no-repeat #853C08;
    background: -moz-radial-gradient(50% 50% 0deg,ellipse farthest-corner, #D16D15, #853C08, #853C08 170%);
    background: -o-radial-gradient(50% 50%, #D16D15, #853C08);
    height:100%;
    padding:30px;
    box-shadow:0 0 50px #000 inset;
    overflow:hidden;
  }
  body {
    color:white;
    font: 20px Arial;
  }
  a {
    width:50px;
    height:50px;
    cursor:pointer;
    border:7px solid white;
    position:absolute;
    border-radius:50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    animation: customAnimation 13s linear 0s infinite alternate;
    -moz-animation: customAnimation 13s linear 0s infinite alternate; /* Firefox */
    -webkit-animation: customAnimation 13s linear 0s infinite alternate; /* Safari and Chrome */
    -o-animation: customAnimation 13s linear 0s infinite alternate; /* Opera */
    -ms-animation: customAnimation 13s linear 0s infinite alternate; /* IE10 */

    -webkit-transition: all 0.3s ease-in-out; 
       -moz-transition: all 0.3s ease-in-out; 
         -o-transition: all 0.3s ease-in-out; 
            transition: all 0.3s ease-in-out; 

  }
  a:hover, a:focus {
    border:25px solid white;
  }
  /*animation keyframes*/
  @keyframes customAnimation
  {
    0%   {box-shadow: 0 0 15px orange;}
    25%  {box-shadow: 0 0 15px red;}
    50%  {box-shadow: 0 0 15px pink;}
    75%  {box-shadow: 0 0 15px violet;}
    100% {box-shadow: 0 0 15px yellow;}
  }

  @-moz-keyframes customAnimation /* Firefox */
  {
    0%   {box-shadow: 0 0 15px orange;}
    25%  {box-shadow: 0 0 15px red;}
    50%  {box-shadow: 0 0 15px pink;}
    75%  {box-shadow: 0 0 15px violet;}
    100% {box-shadow: 0 0 15px yellow;}
  }

  @-webkit-keyframes customAnimation /* Safari and Chrome */
  {
    0%   {box-shadow: 0 0 15px orange;}
    25%  {box-shadow: 0 0 15px red;}
    50%  {box-shadow: 0 0 15px pink;}
    75% ...

JavaScript

var circle = document.querySelector("a"),
      doc = document,
      timer = false,
      CurrX = 0,
      CurrY = 0;
  
  var onMove = function (e) {
   
      CurrX = e.pageX;
      CurrY = e.pageY;
      if ( timer ) {
        clearInterval( timer );
      }
      timer = setInterval(moveCircle, 100);
  };
  var moveCircle = function () {
    circle.style.left = CurrX - 25+ "px";
    circle.style.top = CurrY -25 + "px";
  };

  doc.addEventListener("mousemove", onMove, false);
  doc.addEventListener("click", moveCircle, false);
  doc.addEventListener("touchmove", onMove, false);
  doc.addEventListener("touchstart", moveCircle, false);