Bubble with image

on

Bubble with image.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bubbling</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="iphone.css">
<style type="text/css">
*
{
margin: 0;
padding: 0;
box-sizing: border-box;

}
body
{
/*overflow: hidden;*/
/*height: 100vh;*/
}
span
{
position: absolute;
background: url(bg.jpg);
background-size: cover;
pointer-events: none;
transform: translate(-50%,-50%);
border-radius: 50%;
animation: animate 4s linear infinite;
}
@keyframes animate
{
0%
{
transform: translate(-50%,-50%);
opacity: 1;
}
100%
{
transform: translate(-50%,-1000%);
opacity: 0;
}
}

</style>

</head>

<body>
<!-- <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> -->
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-9378326636860315",
          enable_page_level_ads: true
     });
</script>



<script type="text/javascript">
document.addEventListener("mousemove",function(e){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var x= e.offsetX;
var y= e.offsetY;
bubbles.style.left = x+'px';
bubbles.style.top = y+'px';
var size = Math.random() * 100;
bubbles.style.width = 20 + size+'px';
bubbles.style.height = 20 + size+'px';
body.appendChild(bubbles);

setTimeout(function(){
bubbles.remove();
},4000)
})
</script>

</body>
</html>