Web 应用程序中的动画光标支持？
Posted
技术标签:
【中文标题】Web 应用程序中的动画光标支持？【英文标题】：Animated cursor support in web applications? 【发布时间】：2012-02-29 15:33:03 【问题描述】：是否有任何网络浏览器支持动画光标？
我一直在网上搜索以将自定义光标添加到我的网络应用程序。我一直在寻找很多非动画 (.cur) 和动画 (.ani) 光标，并使用正确的 CSS，以便我的应用程序具有自定义光标！我尝试的网络浏览器似乎不支持动画光标，我想知道是否有任何方法可以将动画光标放入我的网络应用程序中。
【问题讨论】：
【参考方案1】：回答你的问题
是否有任何网络浏览器支持动画光标？
是的。根据MDN，IE 支持 .cur 和 .ani 格式。
作为一个建议，您是否考虑过使用动画 gif 图片来代替？
在你的 CSS 中试试这个
cursor: url(img/animated_cursor.gif), auto;
【讨论】：
在你提到之前我没有尝试动画 gif 的想法，但我只是尝试过。光标出现了，但在 Firefox 和 Chrome 中没有动画。光标根本没有出现在 IE9 或 Opera 中。它在 Safari (Windows) 中做了一些非常奇怪的事情——它出现了，但只有当我在屏幕上垂直移动光标时才会有动画，而且动画非常烦躁和喜怒无常。 嗯..我会检查并恢复。【参考方案2】：在做了更多研究之后，我认为目前不可能。截至 2012 年 2 月 8 日，似乎没有任何浏览器使用 CSS cursor 属性支持动画光标。我想可以使用 javascript 每隔几帧重复更改 cursor 属性的值以使其看起来具有动画效果，但这可能比它的价值更麻烦。
动画光标文件 .ani 文件不起作用。所有 5 个主要的网络浏览器都不会显示光标。如果您尝试一些 CSS，例如 cursor: url('animated.ani')，该光标将不会出现！
如果你将光标设为动画 gif 文件，它只会在某些浏览器上显示，而且它是喜怒无常的，例如 cursor: url('animated.gif')，光标在 Firefox 和 Chrome 中有效但不是动画，光标在IE9 或 Opera，它在 Windows 版本的 Safari 中做了一些非常奇怪的事情——它可以工作，但只有当我在屏幕上垂直移动光标时才会有动画，而当光标没有移动或水平移动时根本没有动画。感谢 Brutallus 提出使用动画 gif 的想法，即使它不起作用！
目前浏览器似乎不支持动画光标，这很遗憾，因为我真的认为它会为某些 Web 应用程序增加一些深度。我不提倡在大多数网站上使用动画光标，因为它们非常烦人，但在少数情况下它们可能有用，例如 html5 游戏，光标可能会添加到游戏的主题中。
【讨论】：
根据较新的答案，可以使用 javascript + css 动画光标非常适合个人博客和其他有趣的网站。【参考方案3】：-->当你向下移动鼠标时它会闪烁
这是因为光标越过动画 gif（在 #mycursor 图像上，查看代码）并退出调用函数的元素。
【讨论】：
【参考方案4】：您可以借助一些 javascript 来实现它：
添加到您的 CSS 中
#container
cursor : none;
#cursor
position : absolute;
z-index : 10000;
width : 40px;
height : 40px;
background: transparent url(../images/cursor.gif) 0 0 no-repeat;
然后添加到你的js中
纯 JavaScript 版本
// Set the offset so the the mouse pointer matches your gif's pointer
var cursorOffset =
left : -30
, top : -20
document.getElementById('container').addEventListener("mousemove", function (e)
var $cursor = document.getElementById('cursor')
$cursor.style.left = (e.pageX - cursorOffset.left) + 'px';
$cursor.style.top = (e.pageY - cursorOffset.top) + 'px';
, false);
jQuery 版本
$('#container').on("mousemove", function (e)
$('#cursor').offset(
left: (e.pageX - cursorOffset.left)
, top : (e.pageY - cursorOffset.top)
)
);
【讨论】：
但是使用这种方法，当您离开浏览器时，光标仍然停留在边框上，它应该在之前变得不可见 在这个例子中，创建的光标的移动并不顺畅。这是个好主意，但您应该使用 jquery 动画来制作平滑移动的光标图像。【参考方案5】：我设法使用 CSS 关键帧来实现这一点，并为光标的源图像设置动画。它可以在 Chrome 和 Safari 中运行（尽管如果你有很多东西在运行，它可能会有点小故障）。对于我的个人网站来说已经足够了！
*
cursor: url(frame1.png), auto;
-webkit-animation: cursor 400ms infinite;
animation: cursor 400ms infinite;
@-webkit-keyframes cursor
0% cursor: url(frame1.png), auto;
20% cursor: url(frame2.png), auto;
40% cursor: url(frame3.png), auto;
60% cursor: url(frame4.png), auto;
80% cursor: url(frame5.png), auto;
100% cursor: url(frame6.png), auto;
@keyframes cursor
0% cursor: url(frame1.png), auto;
20% cursor: url(frame2.png), auto;
40% cursor: url(frame3.png), auto;
60% cursor: url(frame4.png), auto;
80% cursor: url(frame5.png), auto;
100% cursor: url(frame6.png), auto;
【讨论】：
这种方法是我最喜欢的一种。然而，这种故障确实很烦人，但幸运的是我找到了解决方案。问题（根据我的数字感觉）是如果浏览器的渲染引擎在所有.png 文件下载之前启动，某些帧可能会丢失。要解决这个问题，您必须延迟 .css 规则并使其稍后生效！就像 defer 用于脚本文件一样。使用<link rel="preload" href="myCssRules.css" as="style" onload="var useThis=this; useThis.onload=null; setTimeout(function() useThis.rel='stylesheet'; ,3000);"> 或改进它。检查 caniuse.com
对我来说，故障来自于它在 100% 时丢失了帧（确保你定义了一个）。【参考方案6】：
截至 2017 年，没有主流浏览器真正支持动画光标（.ani 类型），而且我认为未来没有任何人真正计划添加它们。然而，一些随机浏览器可能支持这个功能（一个不太知名的浏览器），所以你应该添加一个功能，使光标在这些浏览器中工作：
body
cursor: url("hand-pointing.ani"), pointer;
这样，如果动画光标在用户的浏览器中不起作用，至少可以启用普通指针光标。如果您不添加指针部分，那么没有动画光标支持的浏览器将加载与您想要的完全不同的光标。另外，请注意默认浏览器光标有点糟糕。我知道很多人希望在主流浏览器中添加动画光标支持，但除非有很多人申请或其他什么，否则不会发生。
换句话说，这个问题现在没有答案。如果这有变化，请发表评论。
【讨论】：
【参考方案7】：没有错误的完整代码
<body id="body" onmousemove="showCoords(event)" onmouseout="clearCoor()">
<div id="mini_mouse">
</div>
<script src="lib/js/jquery-3.3.1.min.js"></script>
<script>
function showCoords(event)
var elmnt = document.getElementById("html");
var scrollTop = elmnt.scrollTop;
var x = (event.clientX) - (10);
var y = (event.clientY) - (10) + (scrollTop);
document.getElementById("mini_mouse")
.style = ("top: " + y + "px ;" + "left: " +
x + "px ;" + "
background-color: red;
width: 20px;
height: 20px;
opacity: .5 ;
position: absolute;
z-index: 100;
border-radius: 100px ;
");
function clearCoor()
document.getElementById("mini_mouse").style = "";
</script>
【讨论】：
【参考方案8】：我能够在现代浏览器中渲染.ani光标，方法是使用JavaScript从.ani文件中提取单个动画帧并将它们转换为数据URI，然后我将其组合成类似于所提出的解决方案的CSS动画上面的劳拉。
我已将其发布为一个名为 ani-cursor 的 NPM 模块。
这种方法的一些限制：
.ani 文件必须来自同一个域，或者包含正确的 CORS 标头。
CSS 光标动画目前在 Safari 中不可用，但 a fix has landed 所以它应该在下一个版本中。
我还写了一篇博文，详细介绍了它的工作原理：https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/
【讨论】：
以上是关于Web 应用程序中的动画光标支持？的主要内容，如果未能解决你的问题，请参考以下文章