小球跟随鼠标移动效果

来源：互联网发布：数据图表在线处理网站编辑：程序博客网时间：2024/06/02 16:41

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#list li {
/*width: 30px;*/
/*height: 30px;*/
list-style: none;
/*border-radius: 50%;*/
/*background: deeppink;*/
position: absolute;
}
div{
width: 50px;
height: 50px;
border-radius: 60%;
text-align: center;
/*padding-top: 6px;*/

}
.xin{
/*margin-top:200px;*/
/*margin-left: 300px;*/
/*background: url("aa.jpg") -200px -300px no-repeat;*/
/*position: relative;*/
/*z-index: 200;*/
transform: scale(0.1);
border: 1px solid red;
}

span{
display: block;
padding-top: 15px;
}
.hua{
background: #ff1493;
height: 80px;
position: absolute;
transition: all 2s ease;
/*opacity: 0;*/
z-index: -1;
}
.hua1{
/*background: url("bb.jpg") -500px -500px no-repeat;*/
}
.hua1 img{
width: 60px;
height: 60px;
display: block;
border-radius: 50%;

}
.hua2{
top: -70px;
}
.hua3{
top: -50px;
right: -40px;
transform: rotate(50deg);
}
.hua4{
top: -50px;
left: -40px;
transform: rotate(-50deg);
}
.hua5{
top: 10px;
left: -40px;
transform: rotate(50deg);
}
.hua6{
top: 10px;
right: -40px;
transform: rotate(-50deg);
}
.hua7{

top: 30px;
}
.jing{
height: 300px;
width: 20px;
background: #39f409;
left: 15px;
position: relative;
z-index: -2;
/*opacity: 0;*/
}
.ye1{
width: 30px;
height: 150px;
background: green;
position: relative;
top: -280px;
left: -50px;
transform: rotate(-50deg);
z-index: -4;
/*opacity: 0;*/
}
.ye2{
width: 30px;
height: 150px;
background: green;
position: relative;
top: -380px;
right: -70px;
transform: rotate(50deg);
z-index: -4;
/*opacity: 0;*/
}
</style>
</head>
<body>
<ul id="list">
<li>
<div class="xin">
<div class="hua1"><img src="bb.jpg" alt=""/></div>
<div class="hua2 hua"></div>
<div class="hua3 hua"></div>
<div class="hua4 hua"></div>
<div class="hua5 hua"></div>
<div class="hua6 hua"></div>
<div class="hua7 hua"></div>
<div class="jing"></div>
<div class="ye1"></div>
<div class="ye2"></div>
</div>
</li>
<li>
<div class="xin">
<div class="hua1"><img src="bb.jpg" alt=""/></div>
<div class="hua2 hua"></div>
<div class="hua3 hua"></div>
<div class="hua4 hua"></div>
<div class="hua5 hua"></div>
<div class="hua6 hua"></div>
<div class="hua7 hua"></div>
<div class="jing"></div>
<div class="ye1"></div>
<div class="ye2"></div>
</div>
</li>
<li>
<div class="xin">
<div class="hua1"><img src="bb.jpg" alt=""/></div>
<div class="hua2 hua"></div>
<div class="hua3 hua"></div>
<div class="hua4 hua"></div>
<div class="hua5 hua"></div>
<div class="hua6 hua"></div>
<div class="hua7 hua"></div>
<div class="jing"></div>
<div class="ye1"></div>
<div class="ye2"></div>
</div>
</li>
<li>
<div class="xin">
<div class="hua1"><img src="bb.jpg" alt=""/></div>
<div class="hua2 hua"></div>
<div class="hua3 hua"></div>
<div class="hua4 hua"></div>
<div class="hua5 hua"></div>
<div class="hua6 hua"></div>
<div class="hua7 hua"></div>
<div class="jing"></div>
<div class="ye1"></div>
<div class="ye2"></div>
</div>
</li>
<li>
<div class="xin">
<div class="hua1"><img src="bb.jpg" alt=""/></div>
<div class="hua2 hua"></div>
<div class="hua3 hua"></div>
<div class="hua4 hua"></div>
<div class="hua5 hua"></div>
<div class="hua6 hua"></div>
<div class="hua7 hua"></div>
<div class="jing"></div>
<div class="ye1"></div>
<div class="ye2"></div>
</div>
</li>

</ul>
<script>
var list = document.getElementById('list');
var lis = list.getElementsByTagName('li');
document.documentElement.onmousemove = function (event) {
var e = event || window.event;
var x = e.clientX;
var y = e.clientY;
var m = 0;
var timer = setInterval(function () {
lis[m].style.left = x + 'px';
lis[m].style.top = y + 'px';
m = m+1;
if(m>=lis.length){
clearTimeout(timer);
m = 0;
}
}, 50);
}

</script>
</body>
</html>

0 0