网页中小飞机跟随鼠标

最新推荐文章于 2024-05-19 17:34:30 发布

啊呼,吖

最新推荐文章于 2024-05-19 17:34:30 发布

阅读量102

点赞数

文章标签： html javascript css

原文链接：https://www.bilibili.com/video/BV1NL411w7qC/?spm_id_from=333.337.search-card.all.click

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

</head>
<body>
    <div id="plane">
        <i class="fa fa-paper-plane" aria-hidden="true"></i>
    </div>
    <script>
        let plane=document.getElementById('plane');
        let deg=0,ex=0,ey=0,vx=0,vy=0,count=0;
        window.addEventListener('mousemove',(e)=>{
            ex=e.x-plane.offsetLeft-plane.clientWidth/2;
            ey=e.y-plane.offsetTop-plane.clientHeight/2;
            deg=360*Math.atan(ey/ex)/(2*Math.PI)+45;
            if(ex<0){
                deg+=180;
            }
            count=0;
        })
        function draw(){
            plane.style.transform='rotate('+deg+'deg)';
            if(count<100){
                vx+=ex/100;
                vy+=ey/100;
            }
            plane.style.left=vx+'px';
            plane.style.top=vy+'px';
            count++;
        }
        setInterval(draw,1);
    </script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 渐变背景 */
    background: linear-gradient(200deg,#005bea,#00c6fb);
}

#plane{
    color: #fff;
    font-size: 70px;
    /* 绝对定位 */
    position: absolute;
    /* 水平+垂直居中 */
    justify-content: center;
    align-items: center;
    /* 弹性布局 */
    display: flex;
}