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

预览效果

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

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

相关推荐
小桥风满袖4 分钟前
极简三分钟ES6 - ES8中对象扩展
前端·javascript
代码的余温15 分钟前
Web服务器VS应用服务器:核心差异解析
运维·服务器·前端
一涯20 分钟前
日常小常识记录
前端
那一抹阳光多灿烂26 分钟前
CSS 编码规范
前端·css
degree52027 分钟前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
૮・ﻌ・29 分钟前
CSS高级技巧---精灵图、字体图标、布局技巧
前端·css
昔人'30 分钟前
纯`css`固定标题并在滚动时为其添加动画
前端·css
超人不会飛31 分钟前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github
三角叶蕨33 分钟前
javaweb CSS
css·web
ice breaker33 分钟前
tailwindcss 究竟比 unocss 快多少?
css·unocss·tailwindcss