CSS-光标过渡 [英] CSS - Cursor Transition

问题描述

是否可以通过CSS过渡设置光标状态的动画?

Is it possible to animate with a CSS transition the status of the cursor?

我已经尝试过使用此代码，但无法正常工作.

I've tried with this code but it is not working.

.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>

推荐答案

仅靠CSS是不可能的.过渡仅适用于可动画设置的属性；而 cursor 不会出现.有关可设置动画的道具的完整列表，请在此处进行检查.

That is not possible with CSS alone. Transition only works on animatable properties; whereas cursor does not appear. For a full list of animatable props, please check here.

请注意，您也可以在.cursor元素中放入 .gif .没想到，某些大小限制会相应地应用于不同的浏览器.

Please notice you may also put .gif for the .cursor element; bare in mind there are certain size restrictions that apply accordingly on different browsers.

这篇关于CSS-光标过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！