无需登录 数据私有 本地保存

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

前端设计 生成器 CSS 光标 生成器
170
0
0
0
Hover Me
示例链接 移动鼠标体验光标 ✨
当前光标：default
🖱️ 基础光标
🔗 状态与反馈
↔️ 调整大小
🖐️ 拖拽与交互
🔍 其他

点击或拖拽上传光标图片

支持 PNG / JPG / SVG / GIF
推荐尺寸：32×32 或 64×64 像素

选择一个SVG模板，自定义颜色和大小，生成矢量光标。

实心圆
圆环
十字准星
菱形
三角形
圆角方形
cursor: default;

将此CSS代码应用到任意HTML元素上即可改变鼠标指针样式。

常见问题与知识点

CSS cursor 属性用于设置鼠标指针在元素上时的外观。常用值包括：pointer（手型，表示可点击）、default（默认箭头）、text（文本选择光标）、move（移动光标）、wait（等待/加载）、not-allowed（禁止操作）、crosshair（十字准星）、grab（可抓取）等。完整列表包含30+种内置光标样式。

使用 url() 函数引用图片，语法为：
cursor: url('图片地址') [x] [y], fallback;
其中 x 和 y 是热点坐标（可选），表示光标的"点击点"。推荐使用小尺寸图片（32×32或64×64px），支持 PNG、JPG、SVG、GIF 格式。务必设置 fallback 光标以防图片加载失败。

热点（hotspot）是光标图片中代表"点击位置"的像素坐标。例如，一个箭头光标的热点通常在箭头尖端（约0,0位置），而一个圆形光标的热点通常在圆心。在CSS中设置：cursor: url(img.png) 16 16, auto; 表示热点在图片的(16px, 16px)位置。合理设置热点能让用户准确点击目标。

SVG光标使用矢量图形，具有以下优势：① 文件极小，可直接内联为Data URI无需额外HTTP请求；② 任意缩放不失真，适配高DPI屏幕；③ 可通过CSS或JS动态修改颜色和形状；④ 无需外部文件，便于管理和维护。使用方式：cursor: url("data:image/svg+xml,...") x y, fallback;

常见原因：① 图片尺寸过大——浏览器通常限制光标图片最大为128×128px；② 图片路径错误或跨域问题；③ 缺少fallback值；④ 图片格式不支持（推荐PNG/SVG）；⑤ Data URI编码错误。建议始终设置fallback光标（如auto或pointer），并确保图片可访问。

当然可以！这是CSS光标最常见的用法。你可以为按钮设置cursor: pointer;，为输入框设置cursor: text;，为拖拽区域设置cursor: grab;。通过CSS选择器精准控制每个元素的光标样式，能极大提升用户体验和界面可用性。
🔧 相关工具