自定义光标生成器 - 在线CSS鼠标指针代码

步骤一：选择光标来源模式

工具提供三个选项卡：预设光标、自定义图片和SVG模板。点击对应的选项卡切换模式。

• 预设光标：适合快速使用常见光标样式，如pointer、crosshair等。
• 自定义图片：适合上传自己的图标文件作为光标，支持PNG、JPG、SVG、GIF格式。
• SVG模板：适合需要矢量图形光标且希望自定义颜色和大小的场景。

步骤二：配置光标参数

预设光标模式：从五个分类中点击选择您需要的光标样式。光标分为"基础光标"（如default、pointer）、"状态与反馈"（如wait、not-allowed）、"调整大小"（如n-resize、nwse-resize）、"拖拽与交互"（如grab、grabbing）和"其他"类别。

自定义图片模式：点击"选择文件"按钮或直接将图片拖拽到上传区域。支持PNG、JPG、SVG、GIF格式，推荐尺寸为32x32或64x64像素。上传后，下方会出现热点坐标设置区域。

SVG模板模式：从六种图形（实心圆、圆环、十字准星、菱形、三角形、圆角方形）中选择一种，然后通过颜色选择器设置填充或描边颜色，选择SVG尺寸（24px到64px），设置描边宽度（2px到5px）。

步骤三：调整热点坐标（可选）

热点（Hotspot）是光标图片中代表实际点击位置的像素坐标。这一步对于自定义图片和SVG模板尤为重要。

• 在"热点 X (px)"和"热点 Y (px)"输入框中填入数值。
• 默认值为(0,0)，表示光标图片的左上角，适合箭头类图标。
• 圆形或居中对称的图标，建议将热点设为图片尺寸的一半，例如64x64图片设为(32, 32)。
• 工具会自动在生成的CSS代码中包含热点坐标参数。

步骤四：设置Fallback光标

Fallback是当自定义光标加载失败时的备用样式，是生产环境中必不可少的安全措施。在"Fallback光标"下拉菜单中选择一个合适的值：

• auto（默认）：浏览器根据上下文自动选择合适的光标。
• default：系统默认箭头光标。
• pointer：手型指针，表示可点击元素。
• crosshair：十字准星，常用于绘图或选择区域。
• none：隐藏光标，适用于自定义光标已包含所有状态的场景。

步骤五：预览光标效果

将鼠标移动到页面顶部的"光标预览区"，即可实时体验当前配置的光标效果。预览区域内包含示例链接、按钮等交互元素，建议在不同元素上测试光标的视觉表现和点击反馈。如果效果不理想，返回上方调整参数后再次预览，直到满意为止。

步骤六：复制并应用CSS代码

确认效果满意后，在"生成的CSS代码"区域查看完整代码。点击"复制代码"按钮将代码复制到剪贴板。然后将代码应用到您的项目中：

• 外部CSS文件：将cursor规则添加到对应的选择器中。
• 行内样式：直接添加到HTML元素的style属性中。
• style标签：嵌入到HTML文档的style块中。

示例应用方式：

/* 应用到整个页面 */
body { cursor: url('your-cursor.png') 0 0, default; }

/* 仅应用到特定元素 */
.my-button { cursor: url('pointer.png') 12 12, pointer; }