<div id="wrap">
<p>move the cursor around the screen</p>
</div>@import url(https://fonts.googleapis.com/css?family=Open+Sans);
html, body {
height: 100%;
margin: 0;
position: relative;
background: #222;
font-family: "Open Sans";
}
#wrap {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#wrap p {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
color: rgba(255,255,255,.5);
font-size: 30px;
text-transform: uppercase;
letter-spacing: 5px;
text-align: center;
}
.ball {
pointer-events: none;
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: gray;
animation: implode 1s ease-in-out;
animation-fill-mode: both;
opacity: .5;
}
@keyframes implode {
100% {transform: scale(0)}
}$(document).ready(function(){
var mousePos = {};
function getRandomInt(min, max) {
return Math.round(Math.random() * (max - min + 1)) + min;
}
$(window).mousemove(function(e) {
mousePos.x = e.pageX;
mousePos.y = e.pageY;
});
$(window).mouseleave(function(e) {
mousePos.x = -1;
mousePos.y = -1;
});
var draw = setInterval(function(){
if(mousePos.x > 0 && mousePos.y > 0){
var range = 15;
var color = "background: rgb("+getRandomInt(0,255)+","+getRandomInt(0,255)+","+getRandomInt(0,255)+");";
var sizeInt = getRandomInt(10, 30);
size = "height: " + sizeInt + "px; width: " + sizeInt + "px;";
var left = "left: " + getRandomInt(mousePos.x-range-sizeInt, mousePos.x+range) + "px;";
var top = "top: " + getRandomInt(mousePos.y-range-sizeInt, mousePos.y+range) + "px;";
var style = left+top+color+size;
$("<div class='ball' style='" + style + "'></div>").appendTo('#wrap').one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function(){$(this).remove();});
}
}, 1);
});
External CSS
This Pen doesn't use any external CSS resources.