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

Question

任何Web浏览器都支持动画游标吗？

我一直在网上搜索我的Web应用程序添加自定义游标.我一直在寻找很多非动画(.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浏览器都不会显示光标.如果你尝试一些类似的CSS cursor: url('animated.ani'),那光标就不会出现!

如果你把光标变成一个动画的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;}
}