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是不可能的。过渡仅适用于动画属性;而cursor没有出现。有关可动画道具的完整列表，请查看here。

请注意，您也可以将.gif放入.cursor元素;请记住，某些尺寸限制适用于不同的浏览器。

Answer 2

Cursor 不是一个可动画的属性，如果它是诚实的话会有点奇怪。如果您想制作动画，我建议您创建一个 GIF ，其开头为 default ，最后为 {{1} }

然后您可以使用 pointer ，如下所示：

GIF

Answer 3

您可以通过在CSS中指定网址：

.test{
    cursor:default;
    width: 100px;
    height: 100px;
    background: red;
}

.test:hover{        
    cursor:url(smiley.gif),url(myBall.cur),auto;
}

CSS - 游标过渡

3 个答案: