css鼠标制作

CSS 鼠标样式定制

修改光标形状
使用 cursor 属性更改鼠标悬停时的图标样式。常见值包括：

• pointer（手型指针）
• text（文本输入光标）
• wait（加载等待）
• crosshair（十字线）
• not-allowed（禁止操作）

button {
  cursor: pointer;
}

自定义光标图片
通过 url() 引用图片，并设置备用样式（若图片加载失败）：

.custom-cursor {
  cursor: url('custom.png'), auto;
}

支持 .cur、.png 或 .svg 格式，需指定热点位置（如 url('image.png') 10 10）。

悬停动画效果
结合 transition 和 transform 实现交互反馈：

.element:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

禁用鼠标事件
使用 pointer-events 控制元素是否响应鼠标操作：

.disabled {
  pointer-events: none;
  opacity: 0.6;
}

高级技巧：追踪鼠标位置
通过 JavaScript 获取坐标并联动 CSS 变量：

document.addEventListener('mousemove', (e) => {
  document.documentElement.style.setProperty('--x', `${e.clientX}px`);
  document.documentElement.style.setProperty('--y', `${e.clientY}px`);
});

CSS 中使用变量：

.follow-cursor {
  position: absolute;
  left: var(--x);
  top: var(--y);
}