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

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

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

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

});