CSS Web 应用程序中的动画光标支持？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9189250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animated cursor support in web applications?
提问by skcin7
Do any web browsers support animated cursors?
是否有任何网络浏览器支持动画光标？
I've been searching the web to add custom cursors to my web application. I've been finding a lot of non animated (.cur) and animated (.ani) cursors, and using the correct CSS so that my application has custom cursors! It seems that the animated cursors are not supported in the web browsers I tried and I was wondering if there is any way possible to put animated cursors into my web application.
我一直在网上搜索以向我的 Web 应用程序添加自定义光标。我一直在发现很多非动画 (.cur) 和动画 (.ani) 光标，并使用正确的 CSS 以便我的应用程序具有自定义光标！我尝试过的 Web 浏览器似乎不支持动画光标，我想知道是否有任何方法可以将动画光标放入我的 Web 应用程序中。
采纳答案by skcin7
After doing some more research, I don't think it's possible at the moment. It doesn't seem that any of the browsers support animated cursors as of 2/8/2012 using the CSS cursorproperty. I suppose it could be done using JavaScript to repeatedly change the value of the cursorproperty every few frames to make it appear animated, but that may be more trouble than it is worth.
在做了更多的研究之后，我认为目前不可能。自 2012 年 2 月 8 日起，似乎没有任何浏览器使用 CSScursor属性支持动画光标。我想可以使用 JavaScriptcursor每隔几帧重复更改属性的值以使其显示动画效果，但这可能比值得的麻烦更多。
Animated cursor files .ani files do not work. All 5 major web browsers will not show the cursor. If you try some CSS like, cursor: url('animated.ani'), that cursor will not show up!
动画光标文件 .ani 文件不起作用。所有 5 种主要网络浏览器都不会显示光标。如果您尝试使用 CSS 之类的 ，cursor: url('animated.ani')该光标将不会显示！
If you make the cursor an animated gif file, it only shows up on some browsers and it's temperamental, like cursor: url('animated.gif'), the cursor works in Firefox and Chrome but it is not animated, the cursor does not work at all in IE9 or Opera, and it did something really weird in the Windows version of Safari - it works but is only animated when I move the cursor vertically on the screen, and did not animate at all when the cursor was not moving or was moving horizontally. Credit to Brutallus for the idea to use an animated gif even though it did not work!
如果您将光标设置为动画 gif 文件，它只会在某些浏览器上显示并且是有气质的，例如cursor: url('animated.gif')，光标在 Firefox 和 Chrome 中工作但没有动画，光标在 IE9 或 Opera 中根本不起作用，并且在 Windows 版本的 Safari 中做了一些非常奇怪的事情 - 它可以工作，但只有当我在屏幕上垂直移动光标时才会动画，并且在光标不移动或水平移动时根本没有动画。感谢 Brutallus 提出使用动画 gif 的想法，即使它不起作用！
It doesn't seem that browsers support animated cursors at this time which is a shame because I really think it would add some depth to certain web applications. I don't advocate using animated cursors for most websites because they are extremely annoying, but there are some rare situations where they can be useful, such as a HTML5 game where the cursor can potentially add to the theme of the game.
目前似乎浏览器不支持动画光标，这是一种耻辱，因为我真的认为它会为某些 Web 应用程序增加一些深度。我不提倡在大多数网站上使用动画光标，因为它们非常烦人，但在一些罕见的情况下它们会很有用，例如 HTML5 游戏，光标可能会添加到游戏的主题中。
回答by Gregory M
You can make it happen with the help of a bit of javascript:
您可以借助一些 javascript 来实现它：
Add to your css
添加到您的 css
#container {
cursor : none;
}
#cursor {
position : absolute;
z-index : 10000;
width : 40px;
height : 40px;
background: transparent url(../images/cursor.gif) 0 0 no-repeat;
}
Then add to your js
然后添加到你的js
Straight Javascript Version
直接 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 Version
jQuery 版本
$('#container').on("mousemove", function (e) {
$('#cursor').offset({
left: (e.pageX - cursorOffset.left)
, top : (e.pageY - cursorOffset.top)
})
});
回答by Laura
I managed to accomplish this using CSS keyframes, animating the source image of the cursor. It works in Chrome and Safari (though it can get a little glitchy if you've got a ton of stuff running). Good enough for my personal site!
我设法使用 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;}
}
回答by marco
-->it flickers for some reason when you move the mouse in a downwards direction
-->当你向下移动鼠标时，它由于某种原因闪烁
It happens because the cursor goes over the animated gif (over the #mycursor image, look the code) and exits the element on which you call the function.
发生这种情况是因为光标越过动画 gif（在 #mycursor 图像上，查看代码）并退出您调用该函数的元素。
回答by Ashwin Krishnamurthy
To answer your question
回答你的问题
Do any web browsers support animated cursors?
是否有任何网络浏览器支持动画光标？
Yes.According to MDN, IE supports .cur and .ani formats.
是的。根据MDN，IE 支持 .cur 和 .ani 格式。
As a suggestion,have you considered using an animated gif image instead?
作为建议，您是否考虑过使用动画 gif 图像？
Try this in your css
在你的 css 中试试这个
cursor: url(img/animated_cursor.gif), auto;
I'd also like to point out that incase you have tried using .cur or .ani files in IE and you didnt get the result you expected, Perhaps its an issue with the path you provided in your cursor url - this blogwill aid u greatly in this aspect.
我还想指出，如果您尝试在 IE 中使用 .cur 或 .ani 文件，但没有得到预期的结果，可能是您在光标 url 中提供的路径有问题 - 这个博客将帮助您在这方面大大。
回答by fcole90
I found this, and seems to work:http://ye5.blogspot.it/2011/01/animated-mouse-cursor-on-mozilla.html
我发现了这个，并且似乎有效：http: //ye5.blogspot.it/2011/01/animated-mouse-cursor-on-mozilla.html
回答by Cannicide
No major browser actually supports animated cursors (of type .ani) as of 2017, and I don't think any are really planning to add them in the future. However, some random browser may support this feature (a not really well known browser), so you should add a feature that will make the cursor work in those browsers:
截至 2017 年，没有主流浏览器实际支持动画光标（.ani 类型），我认为未来没有人真正计划添加它们。但是，一些随机浏览器可能支持此功能（一个不太知名的浏览器），因此您应该添加一个功能，使光标在这些浏览器中工作：
body {
cursor: url("hand-pointing.ani"), pointer;
}
This way, if the animated cursor doesn't work in a user's browser, at least the normal pointer cursor is enabled. If you don't add the pointer part, than browsers without animated cursor support would load an ENTIRELY DIFFERENT cursor from what you wanted. Also, note that the default browser cursors kind of suck. I know that many people want animated cursor support added to major browsers, but it won't happen unless lots of people petition for it or something.
这样，如果动画光标在用户的浏览器中不起作用，至少会启用普通指针光标。如果您不添加指针部分，那么没有动画光标支持的浏览器将加载与您想要的完全不同的光标。另外，请注意默认浏览器光标有点糟糕。我知道很多人希望在主要浏览器中添加动画光标支持，但除非很多人请求它或其他什么，否则它不会发生。
In other words, there is no answer to this question right now. Please comment if this changes.
换句话说，这个问题目前没有答案。如果这有变化，请发表评论。
回答by amir hossieni
Full code without bugs
完整的代码没有错误
<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>
