鼠标悬浮移动特效
效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/890a3c9b5f2e41e6864670821010a1e9.gif#pic_center)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
width: 100%;
height: 100vh;
background: green;
}
span{
position: absolute;
pointer-events: none;
background-size: cover;
border-radius: 50%;
background-position: center;
animation:run 5s linear;
animation-fill-mode:forwards;
}
@keyframes run {
from{
}
40%{
transform:scale(1.5) rotate(180deg);
}
to{
transform:translate(50%,-1000%) rotate(1turn) scale(0.5);
opacity: 0;
}
}
</style>
<script>
document.addEventListener("mousemove",function (ev) {
let body = document.querySelector("body");
let span = document.createElement("span");
let x = ev.offsetX;
let y = ev.offsetY;
span.style.left=x+"px";
span.style.top=y+"px";
let size = Math.random()*50;
span.style.width = size+"px";
span.style.height = size+"px";
if (size.toFixed(0)%2==0){
span.style.backgroundImage='url("img/11.png")';
}else {
span.style.backgroundImage='url("img/4.jpg")';
}
body.appendChild(span);
setTimeout(function () {
span.remove();
},5500)
})
</script>
</head>
<body>
</body>
</html>