Saber 酱的抱枕

Fly me to the moon

04/24
2017
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鼠标指针

  1. Cecelia
    Safari 11Safari 11Mac OS X 10.12.6Mac OS X 10.12.6

    大大打扰了!想请问一下这个软件能把ani存为会动的GIF吗?
    稍微尝试了一下,发现存出来的GIF不会动...不知道是不是自己的rp问题了

    回复
    1. saber 文章作者
      Google Chrome 61Google Chrome 61Windows 7 x64 EditionWindows 7 x64 Edition

      会动的ani有多帧图像,但是这个软件导出的时候好像只能一帧一帧导出。
      你可以导出后用其他软件把这些图像再做成会动的gif。

      回复
  2. COSMOS
    IBrowse IBrowse Android 6.0.1Android 6.0.1

    已收

    收了这么多资源
    不投食问心有愧
    然而

    为什么不支持微信啊(╯‵□′)╯︵┻━┻

    回复
    1. saber 文章作者
      Google Chrome 58Google Chrome 58Windows 7 x64 EditionWindows 7 x64 Edition

      微信吗 改天我看看微信的打赏是怎可么弄的吧 _(:3」∠)_

      回复
    2. saber 文章作者
      Google Chrome 58Google Chrome 58Windows 7 x64 EditionWindows 7 x64 Edition

      添加了微信的二维码
      (才不是暗示呢 (*/ω\*)

      回复
  3. 星空之下
    Google Chrome 39Google Chrome 39Android 5.1.1Android 5.1.1

    啧啧啧啧,我感受到了死宅的气息。。。。。。(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

    回复
TOP
    显示公告
    聊      天
    吃 零 食
    博客后台
    生存时间
    关闭春菜
    X
    召唤春菜