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重定向到其下面的內容的方法。