菜鸟的博客

纵有疾风起，人生不言弃。

导航

鼠标跟随 

<!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>鼠标跟随实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #eed9eba9;
        }

        .shell {
            display: grid;
            grid-template-columns: repeat(7, 40px);
            grid-template-rows: repeat(7, 40px);
            grid-gap: 1.5rem;
        }

        .item {
            background-color: rgb(40, 40, 40);
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, .5);
            border-left: solid 10px #fff;
        }

        .item::after,
        .item::before {
            content: '';
            width: 5px;
            height: 5px;
            display: block;
            position: absolute;
            border-radius: 50%;
            left: 20px;
            background-color: #fff;
        }

        .item::after {
            top: 25px;
        }

        .item::before {
            bottom: 25px;
        }
    </style>
</head>

<body>
    <div class="shell">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        document.addEventListener('mousemove', e => {
            const item = document.querySelectorAll(".item")

            const mouseX = e.clientX
            const mouseY = e.clientY

            item.forEach(sqr => {
                const sqrX = sqr.offsetLeft
                const sqrY = sqr.offsetTop

                const diffX = mouseX - sqrX
                const diffY = mouseY - sqrY

                const radians = Math.atan2(diffY, diffX)

                const angle = radians * 180 / Math.PI

                sqr.style.transform = `rotate(${angle}deg)`
            })
        })
    </script>
</body>

</html>

 

posted on 2025-04-03 23:08  hhmzd233  阅读(10)  评论(0)    收藏  举报