javascript – How to make a thermal trace from the cursor

Question:

I can't figure out how to make the same thermal footprint from the cursor the thermal footprint appears on the top block

Answer:

If you reduce the code and the load on the browser a little and throw garbage away, it will turn out like this)

$('html').on('mousemove', function(e){
  var bubble = $('<div class="bubble"></div>');
  bubble.css({'left': e.clientX-50, 'top': e.clientY-50});
  $('body').append(bubble);
  setInterval(function(){bubble.remove()}, 1000)
});

.bubble{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: coral;
  box-shadow: 0 0 0 0 coral;
  animation: leave 1s ease forwards;
}
@keyframes leave{
  from{
    width: 100px;
    height: 100px;
  }
  to{
    width: 0px;
    height: 0px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Post Views: 4