1
/* 隐藏光标 */
2
html, body,
3
a, button, input, textarea,
4
[role="button"], [type="button"], [type="submit"] {
5
    cursor: none !important;
6
}
7

8
/* 公共样式：自定义光标层 */
9
.custom-cursor-dot,
10
.custom-cursor-ring {
11
    position: fixed;
12
    left: 0;
13
    top: 0;
14
    pointer-events: none;
15
    z-index: 99999;
16
    mix-blend-mode: difference; /* 灰色 + difference -> 伪自适应背景明暗 */
17
}
18

19
/* 内圆：鼠标本体，实心 */
20
.custom-cursor-dot {
21
    width: 6px;
22
    height: 6px;
23
    border-radius: 50%;
24
    background: #bfbfbf;
25
    transform: translate3d(-50%, -50%, 0);
26
    transition: none !important; /* 防止主题乱加 transition: all */
27
}
28

29
/* 外圆：实心半透明圆盘 */
30
.custom-cursor-ring {
31
    width: 24px;
32
    height: 24px;
33
    border-radius: 50%;
34
    background: rgba(191, 191, 191, 0.35);
35
    transform: translate3d(-50%, -50%, 0) scale(1);
36
    border: none;
37
    box-shadow: none;
38
    transition: transform 0.09s ease-out; /* 给按下缩放一个小动画 */
39
}
40

41
/* 鼠标按下时：外圆缩小到接近内圆大小 */
42
.custom-cursor-ring.is-pressed {
43
    /* 6 / 24 = 0.25，这里略大一点，看起来更自然 */
44
    transform: translate3d(-50%, -50%, 0) scale(0.32);
45
}

1
<script>
2
document.addEventListener("DOMContentLoaded", function () {
3
    const dot  = document.createElement("div");
4
    const ring = document.createElement("div");
5

6
    dot.className  = "custom-cursor-dot";
7
    ring.className = "custom-cursor-ring";
8

9
    document.body.appendChild(dot);
10
    document.body.appendChild(ring);
11

12
    // 鼠标目标位置
13
    let mouseX = window.innerWidth / 2;
14
    let mouseY = window.innerHeight / 2;
15

16
    // 外圆当前位置（用于拖尾插值）
17
    let ringX = mouseX;
18
    let ringY = mouseY;
19

20
    // 内圆
21
    document.addEventListener("mousemove", function (e) {
22
        mouseX = e.clientX;
23
        mouseY = e.clientY;
24

25
        dot.style.left = mouseX + "px";
26
        dot.style.top  = mouseY + "px";
27
    });
28

29
    // 外圆：轻微拖尾（但不被甩太远）
30
    function animate() {
31
        const ease   = 0.45;  // 越大越跟手
32
        const maxLag = 6;     // 最大允许落后距离
33

34
        const dx = mouseX - ringX;
35
        const dy = mouseY - ringY;
36
        const dist = Math.hypot(dx, dy);
37

38
        if (dist > maxLag) {
39
            // 太远时，强制把外圆拉回离鼠标 maxLag 的距离
40
            const ratio = maxLag / dist;
41
            ringX = mouseX - dx * ratio;
42
            ringY = mouseY - dy * ratio;
43
        } else {
44
            // 小范围内用缓动
45
            ringX += dx * ease;
46
            ringY += dy * ease;
47
        }
48

49
        ring.style.left = ringX + "px";
50
        ring.style.top  = ringY + "px";
51

52
        requestAnimationFrame(animate);
53
    }
54
    animate();
55

56
    // 鼠标按下时：外圆缩小；松开时恢复
57
    document.addEventListener("mousedown", function () {
58
        ring.classList.add("is-pressed");
59
    });
60

61
    document.addEventListener("mouseup", function () {
62
        ring.classList.remove("is-pressed");
63
    });
64

65
    // 防止鼠标按住移出页面导致状态卡住
66
    document.addEventListener("mouseleave", function () {
67
        ring.classList.remove("is-pressed");
68
        dot.style.opacity  = "0";
69
        ring.style.opacity = "0";
70
    });
71

72
    document.addEventListener("mouseenter", function () {
73
        dot.style.opacity  = "1";
74
        ring.style.opacity = "1";
75
    });
76

77
    // 触摸设备禁用自定义光标
78
    if ("ontouchstart" in window || navigator.maxTouchPoints > 0) {
79
        dot.style.display  = "none";
80
        ring.style.display = "none";
81
        document.documentElement.style.cursor = "auto";
82
        document.body.style.cursor = "auto";
83
    }
84
});
85
</script>