css3怎么制作鼠标

使用CSS3制作鼠标样式

通过CSS3的cursor属性可以自定义鼠标指针样式，支持图像或预定义形状。

基础自定义光标

使用预定义的CSS光标类型：

.element {
  cursor: pointer; /* 手型指针 */
  cursor: help;    /* 帮助问号 */
  cursor: wait;    /* 加载等待 */
  cursor: zoom-in; /* 放大镜 */
}

使用图像作为光标

通过URL引用图像文件（支持PNG/SVG等格式），需指定备用光标类型：

.element {
  cursor: url('custom-cursor.png'), auto;
  cursor: url('custom-cursor.svg') 15 15, pointer; /* 设置热点坐标(15,15) */
}

动态交互效果

结合伪类实现悬停状态变化：

.button:hover {
  cursor: url('hover-cursor.cur'), progress;
}

注意事项

• 图像格式建议使用32x32像素的.cur或.png
• 需考虑跨浏览器兼容性（部分旧浏览器不支持URL方式）
• 移动端设备可能限制自定义光标功能