Saber 酱的抱枕

今天我在网上搜到了一套saber的鼠标指针，作者是miicc。

度盘下载

这套光标是ani格式，也就是动态的。saber会眨眼，呆毛也会动（但是呆毛太小了，基本注意不到）。还是挺可爱的。

缺点是光标主要部分是saber，导致状态部分太小了，状态变化也不明显，看着费劲。

我准备把其中的几个光标用在本站上，经过一番折腾，现在ok了。

一开始，我发现chrome不支持ani格式的光标。后来用Axialis CursorWorkshop导出为cur格式，不过cur格式没有动态效果了。

ps：Axialis CursorWorkshop真好用，可以方便的转换光标格式和导出为其他图像资源。

我导出的cur文件在IE和chrome上正常，但是在firefox上却显示的是2色的效果（黑白的，可能是我导出的设置不对），后来我改为使用gif格式的图片来让firefox能正常显示。

后来我又做了有动态效果的gif图，在chrome和firefox上都可以显示，但是只会显示第一帧，没有动态效果。不知道是浏览器限制了。

现在的css是这样的：

body{cursor:url('/f/saber_cur_normal.ani'), url('/f/saber_cur_normal.gif'), auto;}
a:hover{cursor:url('/f/saber_cur_link.ani'), url('/f/saber_cur_link.gif'), auto;}

这样，在IE和Edge上会显示ani格式的动态光标，在chrome和firefox上使用gif文件做光标。不过这gif只能显示第一帧，让我很残念。

关于css的cursor属性，要注意兼容性问题。不过我们也可以通过指定多个光标的url来实现兼容（如上代码）。

根据caniuse的说明和我的实验，大致结论如下：

ico格式和cur格式可以兼容所有主流浏览器；
图标最好32*32px；
url路径最好用绝对路径。

针对具体浏览器：

IE和Edge只支持光标格式（cur、ani、ico），不支持图片，不支持Data URIs；
chrome和firefox支持cur、ico，但不支持ani。
除IE外其他主流浏览器都支持 png | gif | jpg 格式的图片做光标。
（但是caniuse上又说jpg和png格式的光标在mac上不可用。我没有mac不能测试，保险起见用了gif格式的）
chrome和firefox可以用Data URIs做光标。
最后，再次对gif只能显示第一帧表示残念。

对于调用系统光标样式，可用的属性可参考MDN。

一套saber鼠标指针