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>