js + css 按钮鼠标移动光晕 跟随 

<!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>
</head>
<style>
    .btn-body {
        width: 100%;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn {
        background-color: #7983ff;
        border: none;
        padding: 0.5rem 1rem;
        font-size: 1.2rem;
        color: white;
        cursor: pointer;
        outline: none;
        position: relative;
        overflow: hidden;
    }

    .btn::before {
        content: "";
        position: absolute;
        width: 0px;
        height: 0px;
        top: var(--y);
        left: var(--x);
        transform: translate(-50%, -50%);
        background: radial-gradient(circle closest-side, pink, transparent);
        transition: width .2s ease, height .2s ease;
    }

    .btn span {
        position: relative;
    }

    .btn:hover::before {
        width: 80px;
        height: 80px;
    }
</style>

<body>
    <div class="btn-body">
        <button class="btn">
            <span>Hover me</span>
        </button>
    </div>
    <script>
        let btn = document.querySelector(".btn");
        btn.addEventListener("mousemove", e => {
            let rect = btn.getBoundingClientRect()
            console.log("--------")          
            console.log(btn.getBoundingClientRect())
            console.log(e.target.getBoundingClientRect())
            console.log("--------")
            let x = e.clientX - rect.left;//鼠标距离浏览器左边的宽度 - 按钮距离浏览器左边的宽度
            let y = e.clientY - rect.top; // 鼠标距离浏览器上边的宽度 - 按钮距离浏览器上边的宽度
            btn.style.setProperty("--y", y + "px")// 设置style 属性 如： style="--y:ypx"
            btn.style.setProperty("--x", x + "px")      
        })
    </script>

</body>

</html>

　　

 

posted @ 2023-02-01 01:04  到此灬一游丿  阅读(211)  评论(0)    收藏  举报