css鼠标制作

使用CSS制作鼠标样式

通过CSS可以自定义鼠标指针的样式，包括改变默认光标形状或使用自定义图像。以下是实现方法：

修改默认光标样式
利用cursor属性更改鼠标在不同状态下的显示效果。常见属性值包括：

• auto：浏览器自动决定光标样式
• pointer：手型光标（常用于链接）
• wait：等待状态（通常为沙漏或旋转圈）
• help：帮助问号光标
• crosshair：十字准星
• move：移动光标
• text：文本输入I型光标

示例代码：

.button {
  cursor: pointer;
}
.loading {
  cursor: wait;
}

使用自定义图像作为光标
通过url()函数指定图像路径，并设置备用光标类型：

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

注意事项：

• 图像格式推荐使用.cur或.png
• 需指定备用光标（如auto），当图像加载失败时使用
• 图像尺寸建议不超过128×128像素

创建动画光标效果
结合CSS动画和JavaScript可实现动态光标：

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.animated-cursor {
  cursor: pointer;
  animation: pulse 1s infinite;
}

实现自定义鼠标轨迹效果

通过CSS和JavaScript组合可创建更复杂的交互效果：

基础跟随效果
HTML结构：

<div class="cursor"></div>

CSS样式：

.cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease;
}

JavaScript控制：

document.addEventListener('mousemove', (e) => {
  const cursor = document.querySelector('.cursor');
  cursor.style.left = `${e.clientX}px`;
  cursor.style.top = `${e.clientY}px`;
});

高级粒子轨迹
创建多个元素形成延迟跟随效果：

const cursors = Array(5).fill().map(() => {
  const c = document.createElement('div');
  c.className = 'cursor-trail';
  document.body.appendChild(c);
  return c;
});

document.addEventListener('mousemove', (e) => {
  cursors.forEach((cursor, i) => {
    setTimeout(() => {
      cursor.style.left = `${e.clientX}px`;
      cursor.style.top = `${e.clientY}px`;
    }, i * 50);
  });
});

浏览器兼容性注意事项

• 自定义图像光标在IE/Edge中需要.cur格式
• 复杂动画效果在移动端可能需要特殊处理
• 某些光标属性（如zoom-in/zoom-out）需要现代浏览器支持

可通过特性检测增强兼容性：

if ('cursor' in document.documentElement.style) {
  // 支持高级光标特性
}