<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
body{
background-color: #000;
}
.box{
width: 720px;
margin:0 auto;
background-color: #000;
-webkit-filter: blur(15px) saturate(800%);
cursor: none;
transform-style: preserve-3d;
}
.box:after{
clear: both;
content: '';
display: block;
overflow: hidden;
}
.box span{
float: left;
width: 80px;
height: 60px;
border-radius: 100%;
background-color: #f00;
margin:20px;
transform: translateZ(0);
}
.box .repulse{
display: block;
width: 80px;
height: 60px;
border-radius: 100%;
background-color: #add8e6;
position: absolute;
-webkit-filter: saturate(500%);
}
</style>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<i class="repulse"></i>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('mousemove', function(event){
$('.repulse').css({
left: event.pageX,
top: event.pageY
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号