CSS cursor 支持 Emoji

使用 SVG 方式：

在 CSS 中，为了标识出点击、放大等这种特定动作的交互，一般我们会使用:

.demo {
  cursor: pointer;
}

除了这种指定常规关键字的方式外，还有一种方式就是指定 URL，Demo 如下：

See the Pen custom cursor by hjoker (@hjoker) on CodePen.

语法如下：

cursor: url(one.svg), url(two.svg) 5 5, progress;

1. 如果指定多个 url()浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则使用关键字值代表的指针类型，此处为 progress。
2. 每个 <url> 后面都可选跟一对空格分隔的数字 <x><y> 表示偏移。它们用来设置指针的热点(即自定义图标的实际点击位置)，位置相对于图标的左上角。

Demo 中左侧区块偏移量设置为 0 0，因此尝试选中的时候，整个图片看起来还没碰到文字就可以选中了。右侧区块设置为 32 32 ，即为图片中心位置，此时图片光标需要在中间位置对齐文字才可以选中。

经过测试，cursor 属性对配置的图片有大小限制：Chrome 上宽高超过 120 px J就无法展示对应的图片。

使用 Emoji ：

除了上述 SVG 、PNG 图片的方式外，还可以展示 Emoji，本质上还是借助 url()+ svg 的方式。

cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='100' height='120' viewport='0 0 100 100' style='fill:black;font-size:60px;'><text y='50%'>😱</text></svg>") 16 0,auto;

中间的 Emoji 可以替换成其他表情，或者是文字。

Cursor 属性示意图

from twitter

其中关于 cursor: pointer 的使用，规范中的说明是用于链接的形式，貌似很多时候我们在交互上会使用这个展示🤦‍♀️。

W3C Cursor 说明：https://www.w3.org/TR/css-ui-3/#propdef-cursor SVG url encode 工具：https://yoksel.github.io/url-encoder/ Emoji 表情：https://www.emojicursor.app/ cursor 小猫动画：http://tetrageddon.com/petcursor/