Question

为了清楚地了解我想要的内容，您需要执行以下操作

继续this editor
创建形状
选择它
旋转它
将鼠标放在其中一个调整大小控制点上，然后单击

您将看到光标以形状的角度旋转。

我无法找到任何CSS属性来实现此类事情，如何做到这一点？

Answer 1

你不能，也不能。它只显示不同的调整大小图标。例如，请参阅：http://css-cursor.techstream.org/

Answer 2

我需要一个用于旋转木马的旋转箭头光标。这是我想出的：

https://codepen.io/addison912/pen/MWwmpoz

首先将默认光标隐藏在CSS中：

body * {
  cursor: none;
}

将要使用的光标图像添加到html中：

<div id="cursor">
    <img alt="Cursor Arrow" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Arrow-down.svg"/>
</div>

此图像需要跟踪光标位置：

let currentCursorPos;
let cursorEl = document.querySelector("#cursor");

window.addEventListener("mousemove", event => {
  currentCursorPos = { x: event.clientX, y: event.clientY };
  cursorEl.style.transform = `translate(${currentCursorPos.x}px, ${currentCursorPos.y}px)`;
})

现在，您可以根据需要旋转#cursor img。

Answer 3

是的，在现代浏览器（Chrome，Firefox，Safari）中，您可以使用编码为数据URI的SVG作为CSS游标：

cursor: url("data:image/svg+xml, ... ") 16 16, auto;

编写SVG可能很棘手，但这里有详细记录： https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

然后诀窍就是动态修改编码的SVG转换属性：

<svg viewBox="32 32"><g transform="rotate(45, 16, 16)">...</g></svg>

例如，在上面的示例中，您将45换出所需的角度。

如何旋转css光标

3 个答案: