CSS3添加光标过渡

Question

是否可以将css3过渡添加到光标图像，该图像在body标签中而不动画整个身体...

也许将课程添加到某个地方？

.cursor { cursor: url("/images/light1_CROP.png"), auto;
  animation-iteration-count: infinite;
  animation-name: changewidth;
  animation-direction: alternate;
  animation-duration: 4.1s;
}
[...]

不会工作...

Answer 1

无法对css cursor属性中给定的图像进行动画处理。 但是您可以使用javascript通过每隔一段时间更改图像来做到这一点。

检查一下

Answer 2

如前所述：您不能为cursor属性设置动画。 另外，您尝试执行此操作的方法无效，因为您在页面上的某个div上设置了动画，而不是光标本身。

您可以执行以下操作：您可以隐藏常规光标，将光标图像放在div中（在我的示例中，我选择将其作为背景图像），然后使用javascript将其与光标一起移动。

现在，您可以随意设置动画的div动画。

 $(document).mouseenter(function() { $('.cursor').show(); }); $(document).mouseleave(function() { $('.cursor').hide(); }); $(document).mousemove(function(e) { var posX = e.pageX - 19, posY = e.pageY - 21; $('.cursor').css({ left: posX + 'px', top: posY + 'px' } ); }); 

 .cursor { background-image: url("http://stormfall.linuxweb.net/images/light1_CROP.png"); width: 39px; height: 42px; animation-iteration-count: infinite; animation-name: changewidth; animation-direction: alternate; animation-duration: 4.1s; position: absolute; display: none; top: -21px; left: -19px; } body { cursor: none; } @keyframes changewidth { from { -ms-transform: scale(0.5, 0.5); -webkit-transform: scale(0.5, 0.5); -moz-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); } to { -ms-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); -moz-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Move your mouse here... <div class="cursor"> </div> 

但是，有一个缺点：只要您不想单击任何内容，它就可以工作，因为cursor-div会影响每次单击，因此，如果页面上有一些可单击的元素（如链接或按钮），则表示必须找出一种将所有点击事件从您的cursor-div重定向到其下面的内容的方法。