js实现好玩的小火箭跟随鼠标移动特效

小火箭是字体图标，需要引入阿里巴巴图标库：
<link rel="stylesheet" href="./css/iconfont.css">
页面样式：

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    background: linear-gradient(135deg, #473B7B 0%,#3584A7 51%,#30D2BE 100%);
}
span.iconfont{
    color: #fff;
    font-size: 80px;
    position: absolute;
    text-shadow: 0 8px 18px #000;
}

html代码：

<span id="rocket" class="iconfont icon-huojian"></span>

js代码：

let rocket=document.querySelector("#rocket")
let deg=0,ex=0,ey=0,vx=0,vy=0,count=0
window.addEventListener('mousemove',(e)=>{
    ex = e.x -rocket.offsetLeft-rocket.clientWidth/2
    ey = e.y -rocket.offsetTop-rocket.clientHeight/2
    deg = Math.atan(ey/ex)/(2*Math.PI)*360+45

    if(ex<0){
        deg+=180
    }
    count=0
})

function move(){
    rocket.style.transform=`rotate(${deg}deg)`
    if(count<100){
        vx+=ex/100
        vy+=ey/100
    }
    rocket.style.left=vx+'px'
    rocket.style.top=vy+'px'
    count++
}
setInterval(move, 1);

演示链接：https://www.shangjidong.com/demos/moverocket.html
动图演示：