创建自定义表情符号光标

创建自定义光标有两种常用方法：

• 使用图像

• 创建 canvas 元素并生成 base64 图像

• 这两种方法最终都通过将图像的 URL 设置为 cursor 属性来更改光标：

.custom-cursor {
  cursor: url(/path/to/image.png), auto;
}

/* 或者 */
.custom-cursor {
  cursor: url('data:image/png;base64,...'), auto;
}

要创建自定义表情符号光标，我们可以使用内联 SVG 元素，该元素在中心显示表情符号，如下所示：

.custom-cursor {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewport="0 0 48 48" style="fill:black;font-size:24px"><text y="50%">🚀</text></svg>')
            16 0, auto;
}

查看效果