酷炫的鼠标移入效果(附源码!!)

预览效果

源码(html+js部分)

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./html.css">
   
</head>

<body>
    <div class="card">
        <div class="glow"></div>
        <h1>01</h1>
        <p>让鼠标光标跟着走.</p>
    </div>
    <div class="card">
        <div class="glow"></div>
        <h1>02</h1>
        <p>让鼠标光标跟着走.</p>
    </div>
    <div class="card">
        <div class="glow"></div>
        <h1>03</h1>
        <p>让鼠标光标跟着走.</p>
    </div>
    <script>
        const cards = document.querySelectorAll(".card");

        cards.forEach((card) => {
            card.addEventListener("mousemove", handleMouseMove);
        });

        function handleMouseMove(e) {
            const rect = this.getBoundingClientRect();
            const mouseX = e.clientX - rect.left - rect.width / 2;
            const mouseY = e.clientY - rect.top - rect.height / 2;

            let angle = Math.atan2(mouseY, mouseX) * (180 / Math.PI);

            angle = (angle + 360) % 360;

            this.style.setProperty("--start", angle + 60);
        }

    </script>
</body>

</html>

css 源码(创建一个home.css的文件)

css 复制代码
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600&family=Poppins:wght@400;500&display=swap");

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Poppins", sans-serif;
        }

        :root {
            --gradient: conic-gradient(from 90deg at 50% 50%,
                    rgb(251, 55, 60),
                    rgba(252, 114, 28, 1),
                    rgba(255, 220, 0, 1),
                    rgba(27, 206, 255, 1),
                    rgba(42, 107, 255, 1),
                    rgba(217, 41, 255, 1),
                    rgba(255, 10, 92, 1));
        }

        body {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #0f0f0f;
            padding: 20px 0;
        }

        .card {
            --start: 0;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            width: 280px;
            height: 350px;
            margin: 10px;
            padding: 10px 40px;
            background-color: #040404;
            border-radius: 14px;
            transition: border-color 0.3s ease-in-out;
        }

        .card::before {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 14px;
            border: 2px solid transparent;
            background: var(--gradient);
            background-attachment: fixed;
            mask: linear-gradient(#0000, #0000),
                conic-gradient(from calc((var(--start) - (20 * 1.1)) * 1deg),
                    #ffffff1f 0deg,
                    white,
                    #ffffff00 100deg);
            mask-composite: intersect;
            mask-clip: padding-box, border-box;
            opacity: 0;
            transition: 0.5s ease;
        }

        .glow {
            pointer-events: none;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            filter: blur(14px);
        }

        .glow::before {
            position: absolute;
            content: "";
            width: 98%;
            height: 98%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 14px;
            border: 15px solid transparent;
            background: var(--gradient);
            background-attachment: fixed;

            mask: linear-gradient(#0000, #0000),
                conic-gradient(from calc((var(--start) - (20 * 1.1)) * 1deg),
                    #ffffff1f 0deg,
                    white,
                    #ffffff00 100deg);
            mask-composite: intersect;
            mask-clip: padding-box, border-box;
            opacity: 0;
            transition: 1s ease;
        }

        .card:hover>.glow::before {
            opacity: 1;
        }

        .card:hover::before {
            opacity: 0.6;
        }

        h1 {
            font-size: 65px;
            color: rgb(71, 71, 71);
            text-align: center;
            font-weight: 600;
        }

        p {
            font-size: 20px;
            color: rgb(174, 174, 174);
            font-weight: 600;
        }

欢迎大家关注[小白讲前端]

相关推荐
蟾宫曲2 小时前
在 Vue3 项目中实现计时器组件的使用(Vite+Vue3+Node+npm+Element-plus,附测试代码)
前端·npm·vue3·vite·element-plus·计时器
秋雨凉人心2 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
liuxin334455662 小时前
学籍管理系统:实现教育管理现代化
java·开发语言·前端·数据库·安全
qq13267029403 小时前
运行Zr.Admin项目(前端)
前端·vue2·zradmin前端·zradmin vue·运行zradmin·vue2版本zradmin
魏时烟4 小时前
css文字折行以及双端对齐实现方式
前端·css
哥谭居民00015 小时前
将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3(组件传值)
javascript·vue.js·typescript·npm·node.js·css3
踢足球的,程序猿5 小时前
Android native+html5的混合开发
javascript
2401_882726485 小时前
低代码配置式组态软件-BY组态
前端·物联网·低代码·前端框架·编辑器·web
web130933203985 小时前
ctfshow-web入门-文件包含(web82-web86)条件竞争实现session会话文件包含
前端·github
胡西风_foxww5 小时前
【ES6复习笔记】迭代器(10)
前端·笔记·迭代器·es6·iterator