CSS-光标转换

Question

是否可以用CSS转换来设置光标状态的动画？

我尝试过使用此代码，但它不起作用。

.test {
  cursor: default;
  width: 100px;
  height: 100px;
  background: red;
}
.test:hover {
  cursor: pointer;
  -moz-transition: cursor 500ms ease-in-out;
  -o-transition: cursor 500ms ease-in-out;
  -webkit-transition: cursor 500ms ease-in-out;
  transition: cursor 500ms ease-in-out;
}

<div class="test"></div>

Answer 1

仅使用CSS是不可能的。过渡仅适用于可设置动画的属性；而CCD_ 1没有出现。有关可动画道具的完整列表，请查看此处。

请注意，您也可以将.gif放在.cursor元素中；请记住，在不同的浏览器上都有相应的大小限制。

Answer 2

Cursor不是一个可动画化的属性，老实说，这会有点奇怪。如果要创建动画，我建议创建一个GIF，它将以default开始，以pointer结束。

然后您可以使用GIF，如图所示：

.test:hover {
    cursor: url("your-image.gif"), auto;
}

Answer 3

您可以通过在CSS:中指定url

.test{
    cursor:default;
    width: 100px;
    height: 100px;
    background: red;
}
.test:hover{        
    cursor:url(smiley.gif),url(myBall.cur),auto;
}