<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background: repeating-linear-gradient(0deg,red 0%, red 50%, green 50%, green 100%),repeating-linear-gradient(90deg,red 0%, red 50%, green 50%, green 100%);
background-size: 30px 30px;
background-blend-mode: difference;
cursor: pointer;
}
span{
position: absolute;
display: block;
width: 150px;
height: 150px;
border-radius: 50%;
pointer-events: none;
background: url(bg.jpg);
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body>
<script>
document.addEventListener("mousemove", function(e){
const body = document.querySelector("body");
const bubbles = document.createElement("span");
bubbles.style.left = -75 + e.offsetX+'px';
bubbles.style.top = -75 + e.offsetY+'px';
body.appendChild(bubbles);
});
</script>
</body>
</html>
Comments
Post a Comment