鼠标光标为 .Gif 不动画答案

【问题标题】：Mouse Cursor As .Gif not Animating鼠标光标为 .Gif 不动画
【发布时间】：2014-02-23 09:27:48
【问题描述】：

我正在尝试将 gif 用作鼠标光标，但光标对我来说根本没有动画。我尝试了几种不同的尺寸，但都没有成功。

html, body {
height: 100%;
margin: 0;
padding: 0;
cursor: url(White-Sperm.gif), url(Sperm-Cursor.png), auto;
}

引用我正在使用的 gif 的 JS Fiddle 在这里：

http://jsfiddle.net/Fq9RL/

我的设计师说，在 Safari 中，它为他制作了“一点”动画，但停滞不前且不流畅。对我来说，它在 Safari 中根本没有动画效果，对我们中的任何一个人来说，在 Chrome 中都不起作用。

以前有人尝试过这种技术吗？我们尝试在 gif 中使用更少的帧、更小的延迟、更小的 gif 大小等。非常感谢任何帮助！

【问题讨论】：

标签： html css animation cursor gif

【解决方案1】：

这里有人问过类似的问题：

Animated cursor support in web applications?

在做了更多研究之后，我认为目前不可能。截至 2012 年 2 月 8 日，似乎没有任何浏览器支持使用 CSS 光标属性的动画光标。我想可以使用 JavaScript 每隔几帧重复更改 cursor 属性的值以使其显示为动画，但这可能比它的价值更麻烦。

所以答案似乎是目前不可能。

【讨论】：

【解决方案2】：

一种解决方案是使用CSS animation 将光标图像从一帧动画到另一帧：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: url(frame1.gif), auto;
    animation: cursor 1s linear infinite;
}
@keyframes cursor{
    0% { 
        cursor: url(frame1.gif), auto;
    }
    50% { 
        cursor: url(frame2.gif), auto;
    }
    100% { 
        cursor: url(frame3.gif), auto;
    }
}

根据需要添加尽可能多的帧。

【讨论】：