使用 CSS 😜 将自定义表情符号用作光标。

所以最近我一直非常忙，无法集中精力写一篇完整的文章😂但我在浪费推特上没有的时间时发现了一个有趣的解决方案，我想与你们分享。

使用纯 CSS，您可以使用属性cursor https://developer.mozilla.org/es/docs/Web/CSS/cursor设置光标，通常您会设置pointer链接和可点击组件等值，progress以指示加载状态。

很久以前，在那些很棒的 90 年代网站上，这非常流行，但如果你想给你的网站增添一些趣味，可以使用cursor: url();。为此，我们将使用 SVG 和数据 URI。像这样：

<img src="'data:image/svg+xml;utf8,<svg ... > ... </svg>'" />

如果我们在 svg 标签内添加表情符号（当然，我会用独角兽🦄来举例），它会将其渲染为光标指针。所以你最终会得到类似的东西：

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

这是结果，所以你们可以检查一下并玩一下

就这些了