免费CSS光标生成器在线 - Custom Mouse Cursor Tool

免费在线CSS光标（cursor）生成器。可视化创建自定义鼠标光标样式，支持所有CSS cursor属性值预览，自定义光标图片URL。一键复制CSS代码，适合前端开发者和设计师。纯前端，无需注册。 | 无需注册 · 数据绝不上传服务器

零依赖·可离线使用

免费在线CSS光标（cursor）生成器。可视化预览所有CSS cursor属性值，支持自定义光标图片URL和热点坐标。一键复制CSS代码，适合前端开发者和设计师。纯前端，无需注册。

调整大小光标

其他光标

自定义光标URL

光标图片URL

热点X坐标

热点Y坐标

Fallback光标

预览区域

将鼠标悬停在此区域查看光标效果

CSS 代码

常见问题

CSS cursor属性支持哪些值？

CSS cursor属性支持通用光标（auto、default、none）、链接与状态光标（pointer、progress、wait）、选择光标（text、crosshair、vertical-text）、移动光标（move、all-scroll）、调整大小光标（n-resize、e-resize等）、缩放光标（zoom-in、zoom-out）以及自定义光标URL等。

如何使用自定义光标图片？

使用cursor: url('图片路径'), auto;语法指定自定义光标图片。图片格式支持.cur、.png、.gif、.svg。可以指定热点坐标（点击位置），如cursor: url('cursor.png') 4 4, auto;表示热点在图片的(4,4)位置。建议图片尺寸不超过128x128像素。

自定义光标图片有什么限制？

浏览器对自定义光标图片有限制：1. 图片尺寸建议不超过128x128像素（部分浏览器限制为32x32）；2. 支持的格式包括.cur、.png、.gif、.svg；3. 必须提供fallback光标值（如auto）；4. 图片需要同源或支持CORS。

CSS cursor属性完全指南

CSS cursor属性用于设置鼠标指针在元素上方时显示的光标类型。合理使用光标可以增强用户界面的交互性和可用性，让用户直观地理解元素的功能和交互方式。例如，链接使用pointer光标，可拖拽元素使用grab/grabbing光标，不可操作元素使用not-allowed光标。

自定义光标最佳实践

1. 图片尺寸：建议不超过32x32像素以保证兼容性，最大不超过128x128像素；2. 格式选择：优先使用SVG格式（支持缩放），其次PNG和CUR；3. 热点坐标：指定光标的点击位置，默认为(0,0)即左上角；4. Fallback值：始终提供标准光标作为后备，如cursor: url('custom.png') 4 4, auto;；5. 性能考虑：避免使用过大的光标图片，会影响渲染性能。

光标在用户体验中的作用

光标是用户与界面交互的重要视觉反馈。pointer光标暗示可点击，move光标暗示可拖拽，text光标暗示可输入，not-allowed光标暗示操作不可用。正确使用光标可以减少用户困惑，提升操作效率。在自定义Web应用中，精心设计的光标可以增强品牌识别度和沉浸感。

🖱️ CSS光标生成器在线