saber酱的抱枕

Fly to the moon

04/24
16:58
ACG 软件

一套saber鼠标指针

一套saber鼠标指针 fate/stay night

今天我在网上搜到了一套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鼠标指针