有点!虽然没有简单或标准的方法,但这是可能的。您可以使用 CSS 中的 cursor
属性 将光标更改为不同的内置原生版本,但这对我们没有太大帮助。您也可以使用该属性将静态图像设置为光标。但同样,这也没有太大帮助,因为您无法在光标设置好后对其进行旋转。
诀窍是用 cursor: none;
完全隐藏光标,并 用您自己的元素替换它。
以下是一个示例
查看 Pen
用 JavaScript 移动假鼠标 by Chris Coyier (@chriscoyier)
在 CodePen 上。
这还没有旋转。但现在光标只是页面上的某个元素,CSS 的 transform: rotate();
可以完全胜任这项工作。需要一些数学计算。
我会将此留给 Aaron Iker 的非常有趣的演示
查看 Pen
鼠标光标指向 cta by Aaron Iker (@aaroniker)
在 CodePen 上。
这是一个无障碍问题吗?关于它的一些内容让我觉得它可能是。这是一个您没有预料到的额外运动,当您可能依赖的元素开始移动时,可能会让您感到迷茫。这实际上只是一种用于有限用途的新颖性的方法,并且要 尊重 prefers-reduced-motion
。您也可以保留原始光标,并在其下方执行一些操作,就像 Jackson Callaway 在这里所做的那样。
对于我们这些刚开始学习 CSS 的人来说,能够混合使用 css + js 太棒了。我喜欢光标技巧,我将在這裡测试一下。谢谢
我已经在我的网站上使用这种效果很多年了 :)
作为一个概念证明,这非常聪明,但我必须承认,看到指针以这种方式移动让我感到非常不舒服。它并没有真正遵循实际行为,但我第一反应是指针被按钮排斥了,就像某种恶作剧。
本着这种精神(一个笑话/恶作剧),我认为探索这种修改可能很有趣。不过,我很难为这种类型的指针行为找到更实际的场景。
不得不说,我一直觉得这样实现的自定义光标特别不稳定,尤其是使用高灵敏度鼠标时。由于实现的性质,感知到的延迟要高得多。
不过我认为 cta 很有趣,它让我笑了。
这是一个不错的效果,并没有预期的那么令人迷茫。
这是一个聪明的技巧 :) 唯一的缺点是假光标移动得比真光标慢一点,造成了笨拙的移动。在我的电脑上相当明显,也让人不舒服。
出于这个原因,这种解决方案可能是一个不错的视觉效果,但我不会建议过度使用它。
不过这让我想到了一些事情。
您写道,静态光标无法旋转。但是您可以动态更改它们,因此,如果您要预先渲染不同角度旋转的光标,并预加载这些图像(以防止闪烁),您可能会达到相同的效果,同时仍然依赖于原生硬件加速光标。根据您的需求,您甚至可能不需要在每个度数都预先渲染旋转,每 10 度就足够了。
我现在无法进行演示,但我认为这可行。