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

预览效果

源码(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;
        }

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

相关推荐
Jonathan Star几秒前
跨域处理的核心是解决浏览器的“同源策略”限制,主流方案
javascript·chrome·爬虫
洛小豆3 分钟前
她问我::is-logged 是啥?我说:前面加冒号,就是 Vue 在发暗号
前端·vue.js·面试
我有一棵树9 分钟前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
white-persist24 分钟前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
果粒chenl1 小时前
React学习(四) --- Redux
javascript·学习·react.js
IT_陈寒1 小时前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start1 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied1 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端