CSS 光标生成器
一个生成和预览 CSS2、CSS3 光标样式和自定义光标的工具。
CSS2 光标通用支持
auto
点击复制
inherit
点击复制
crosshair
点击复制
default
点击复制
help
点击复制
move
点击复制
pointer
点击复制
progress
点击复制
text
点击复制
wait
点击复制
e-resize
点击复制
ne-resize
点击复制
nw-resize
点击复制
n-resize
点击复制
se-resize
点击复制
sw-resize
点击复制
s-resize
点击复制
w-resize
点击复制
CSS3 光标现代浏览器
none
not IE, Safari, Opera
点击复制
context-menu
not Firefox, Chrome
点击复制
cell
not Safari
点击复制
vertical-text
点击复制
alias
not Safari
点击复制
copy
not Safari
点击复制
no-drop
点击复制
not-allowed
点击复制
ew-resize
点击复制
ns-resize
点击复制
nesw-resize
点击复制
nwse-resize
点击复制
col-resize
点击复制
row-resize
点击复制
all-scroll
点击复制
grab
only Webkit and Firefox
点击复制
grabbing
only Webkit and Firefox
点击复制
zoom-in
only Webkit and Firefox
点击复制
zoom-out
only Webkit and Firefox
点击复制
自定义光标高级
基于 URL 的光标
cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load
支持的格式
.cur
.png
.jpg
.gif
示例用法
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
基于 URL 的光标
cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load
支持的格式
.cur
.png
.jpg
.gif
示例用法
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
可访问性注意事项
- • 提供额外的视觉提示，而不是仅仅依靠光标来表达功能
- • 使用在高对比度模式下可见的光标
- • 谨慎使用动画光标，考虑可访问性设置
- • 为键盘导航用户提供焦点指示器
性能优化
- • 预加载自定义光标图像以防止延迟
- • 使用 CSS 精灵图减少 HTTP 请求
- • 避免不必要的光标更改以提高性能
- • 考虑自定义光标在移动环境中不显示