CSS - 光标过渡答案

【问题标题】：CSS - Cursor TransitionCSS - 光标过渡
【发布时间】：2018-07-11 19:25:18
【问题描述】：

是否可以通过 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;
}

&lt;div class="test"&gt;&lt;/div&gt;

【问题讨论】：

您期望/希望发生什么？您如何定义“介于default 和pointer 之间的游标”？
@NiettheDarkAbsol 不，我的意思是平滑过渡，就像你可以使用 opacity 或其他 CSS 属性一样
为什么要改变光标？ - 过渡只为页面上的项目设置动画，这就是 CSS 的用途。要对光标执行此操作，您可能需要尝试使用 javascript 之类的方法。但我不会真的推荐它
@Andrew 感谢您的回复
@Alessio 是的，当然，平滑过渡，但是平滑过渡必须经过中点，不是吗？那么那一刻会是什么样子呢？ ;)

标签： html css

【解决方案1】：

仅靠 CSS 是不可能的。过渡只适用于动画属性；而cursor 没有出现。如需动画道具的完整列表，请查看here。

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

【讨论】：

并不是所有的浏览器都支持 GIF 作为光标格式。您还应该有一个 ANI 光标文件作为替代。

【解决方案2】：

Cursor 不是可动画的属性，说实话会有点奇怪。如果你想创建一个动画，我建议创建一个 GIF，它以 default 开头并以 pointer 结尾。

那么你就可以使用那个GIF了，如图：

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

【讨论】：

这可能是一个不错的解决方案，我会试试的！
请记住，尽管不同的人有不同的指针。当然，许多人可能设置了默认的 Windows，但并不是每个人都开始使用 Windows。因此，如果您这样做，您将需要用您自己的主题覆盖 all 光标。
@NiettheDarkAbsol 真的！ :\
@NiettheDarkAbsol 是对的。除非您打算覆盖所有游标，否则不值得麻烦。

【解决方案3】：

您可以通过在 CSS 中指定一个 url：

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

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

【讨论】：