Question

我想知道是否有办法改变＆＃34;进展＆＃34;光标加载动画。就像在CSS-Trick帖子中更改光标一样。

Answer 1

实现目标的两种方法。

CSS方式

如果要完全自定义光标，可以使用接受图像的cursor（在您的情况下为.gif！）

._show-loader:hover {
  cursor: url('http://i117.photobucket.com/albums/o72/redfenderstrat/Debian_Rotate.gif');
}

我喜欢这种方法，因为我更喜欢尽可能地将JS保留在纯粹的设计之外。

jQuery方式

如果你需要在用户的光标之后添加一个动画（为了使这个更自然，因为人们没有相同的光标），这个jQuery替代方案将使图像坚持光标。

var $showLoader = $('._show-loader');

$showLoader.on('mousemove', function(e) {
  var cursorPos = {
    left: e.pageX + 20,
    top: e.pageY + 20,
  }

  $("._cursor-onLoad").css({
    left: cursorPos.left,
    top: cursorPos.top
  });
});

$showLoader.on('mouseenter', function() {
  $('._cursor-onLoad').css({
    display: 'block',
  })
});

$showLoader.on('mouseleave', function() {
  $('._cursor-onLoad').css({
    display: 'none',
  })
});

JSFiddle here

我真的不喜欢这种替代方案，因为它会影响2002年的缓慢效果。

自定义加载光标

1 个答案: