Question

任何网络浏览器都支持动画光标吗？

我一直在网上搜索自定义游标到我的网络应用程序。我一直在寻找很多非动画（.cur）和动画（.ani）游标，并使用正确的CSS，以便我的应用程序有自定义游标！似乎我试过的Web浏览器不支持动画游标，我想知道是否有可能将动画游标放入我的Web应用程序。

Answer 1

你可以借助一些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)
  })

});

Answer 2

在做了一些研究后，我认为目前不可能。从使用CSS cursor属性到目前为止，任何浏览器都不支持动画游标。我想可以使用JavaScript来每隔几帧重复更改cursor属性的值以使其显示为动画，但这可能比它的价值更麻烦。

动画光标文件.ani文件不起作用。所有5个主要的Web浏览器都不会显示光标。如果您尝试使用cursor: url('animated.ani')之类的CSS，则该光标将不会显示！

如果你把光标变成一个动画的gif文件，它只显示在某些浏览器上并且它很有气质，比如cursor: url('animated.gif')，光标在Firefox和Chrome中工作，但它没有动画，光标不起作用所有在IE9或Opera中，它在Windows版本的Safari中做了一些非常奇怪的事情 - 它可以工作，但只有当我在屏幕上垂直移动光标时才动画，并且当光标没有移动或移动时根本没有动画水平。感谢Brutallus使用动画gif的想法，即使它不起作用！

此时浏览器似乎不支持动画游标，这是一种耻辱，因为我真的认为它会为某些Web应用程序增加一些深度。我并不主张在大多数网站上使用动画游标，因为它们非常烦人，但是在某些罕见的情况下它们很有用，例如HTML5游戏，其中光标可能会添加到游戏的主题中。

Answer 3

我设法使用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;}
}

Answer 4

- ＆gt;当您向下移动鼠标时，它会因某种原因而闪烁

这是因为光标越过动画gif（在#mycursor图像上，查看代码）并退出调用该函数的元素。

Answer 5

回答你的问题

任何网络浏览器都支持动画光标吗？

是。根据MDN，IE支持.cur和.ani格式。

作为建议，您是否考虑使用动画gif图像？

在你的css中试试这个

cursor: url(img/animated_cursor.gif), auto;

我还想指出，如果您尝试在IE中使用.cur或.ani文件而您没有得到预期的结果，也许这是您在光标网址中提供的路径的问题 - 这个{ {3}}在这方面会给你很大的帮助。

Answer 6

我发现了这一点，似乎有效：http://ye5.blogspot.it/2011/01/animated-mouse-cursor-on-mozilla.html

Answer 7

截至2017年，没有主要的浏览器实际支持动画游标（类型为.ani），我认为任何人都不打算在将来添加它们。但是，一些随机浏览器可能支持此功能（一个不是很知名的浏览器），所以你应该添加一个功能，使光标在这些浏览器中工作：

body {
    cursor: url("hand-pointing.ani"), pointer;
}

这样，如果动画光标在用户的浏览器中不起作用，则至少启用正常指针光标。如果您不添加指针部分，那么没有动画光标支持的浏览器将从您想要的内容加载一个完全不同的游标。另外，请注意默认的浏览器游标很糟糕。我知道很多人都希望动画光标支持添加到主流浏览器中，但除非有很多人请求它或其他东西，否则它不会发生。

换句话说，现在这个问题没有答案。如果这种情况发生变化，请发表评论。

Answer 8

没有错误的完整代码

<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>

Answer 9

我能够通过使用JavaScript从.ani文件中提取各个动画帧并将其转换为数据URI来在现代浏览器中呈现.ani光标，然后将其组合成CSS动画上面劳拉提出的解决方案。

我已将其发布为名为ani-cursor的NPM模块。

此方法的一些局限性：

.ani文件必须从同一域提供，或包含正确的CORS标头。
CSS光标动画当前在Safari中不起作用，但a fix has landed在Safari中有效，因此应该在下一版本中使用。

我还写了一篇博客文章，详细介绍了它的工作方式：https://jordaneldredge.com/blog/rendering-animated-ani-cursors-in-the-browser/

Web应用程序中的动画光标支持？

9 个答案: