你能在 CSS 中旋转光标吗?

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!

有点!虽然没有简单或标准的方法,但这是可能的。您可以使用 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 在这里所做的那样