Custom Cursor

将浏览器默认光标替换为自定义图形或圆形光晕。光标本身随交互发生缩放、变色等动态变化，增强操作的感知反馈。

悬停放大

按钮感应

链接追踪

将鼠标移动到这行文字上，每个字符都会独立响应光标靠近。自定义光标创造了全新的交互维度。

/* 自定义光标核心 */
.custom-cursor {
  position: fixed;
  width: 40px; height: 40px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.15s, width 0.3s, height 0.3s;
  mix-blend-mode: difference;
}
.custom-cursor.hovering {
  width: 80px; height: 80px;
  border-color: var(--secondary);
}

/* 隐藏默认光标 */
body { cursor: none; }
a, button { cursor: none; }
    

← 返回索引