使用纯 CSS 在网页上创建自定义光标
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
大家好，今天我们将探讨CSS中的cursor属性。以及为什么不使用自定义光标呢？
预集成光标
CSS 允许我们从三十多种预设光标中进行选择。有些浏览器会自动切换到特定的光标，例如，当光标悬停在链接上时，浏览器会本能地识别出这是一个可点击元素，并将鼠标光标切换到该cursor: pointer;属性对应的光标位置。
总而言之，下表列出了目前 CSS 中几乎所有可用的滑块：
| CSS 值 | 描述 |
|---|---|
| 汽车 | 用户代理将根据当前上下文确定要显示的光标。例如，当鼠标悬停在文本上时，光标将显示为与文本相同的样式。 |
| 默认 | 平台相关的默认光标。通常为箭头。 |
| 没有任何 | 未渲染光标。 |
| 上下文菜单 | 可以使用上下文菜单。 |
| 指针 | 您可以获取帮助信息。 |
| 没有任何 | 光标是指示链接的指针，通常是一个指向链接的手形图像。 |
| 进步 | 程序在后台运行，但用户仍然可以与界面进行交互（与此相反wait）。 |
| 细胞 | 可以选择表格单元格或单元格组。 |
| 十字准星 | 十字光标，通常用于指示位图中的选中状态。 |
| 文本 | 可以选择文本。通常形状为工字钢。 |
| 竖文本 | 可以选择竖排文字。通常形状像一个侧放的工字梁。 |
| 别名 | 需要创建一个别名或快捷方式。 |
| 复制 | 需要复制某些东西。 |
| 移动 | 需要移动某物。 |
| 不下降 | 物品不能丢弃在当前位置。在 Windows 和 Mac OS X 系统中，“禁止丢弃”与“不允许丢弃”含义相同。 |
| 不允许 | 所请求的操作将不会执行。 |
| 抓住 | 某物可以被抓住（拖动以移动）。 |
| 抓取 | 某物被抓住（拖拽移动）。 |
| 全滚动 | 内容可以沿任意方向滚动（平移）。在 Windows 系统中，全滚动与移动效果相同。 |
| 调整颜色大小 | 项目/列可以水平调整大小。通常以左右箭头的形式呈现，中间用竖线分隔。 |
| 行大小调整 | 项目/行可以垂直调整大小。通常以上下箭头的形式呈现，中间用水平线分隔。 |
| 放大 | 可以将某物放大。 |
| 缩小 | 可以将物体缩小（放大）。 |
更多信息，您还可以查阅MDN Web Docs 网站上关于 CSS cursor 属性的文档。
您可以在下方看到一些光标的演示：
自定义光标
幸运的是，我们并不局限于预设的光标，我们可以使用纯 CSS 实现自定义光标。
添加自定义光标非常简单，只需使用 `url: cursor: url(one.svg);` 即可。但我们并不局限于 URL，我们还可以像下面的代码一样插入一个 SVG 图标，让浏览器将鼠标光标替换为该 SVG 图标：
html{
cursor: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 512 512' style='enable-background:new 0 0 512.011 512.011;' xml:space='preserve'%3E %3Cpath fill='DeepSkyBlue' d='M434.215,344.467L92.881,3.134c-4.16-4.171-10.914-4.179-15.085-0.019 c-2.011,2.006-3.139,4.731-3.134,7.571v490.667c0.003,4.382,2.685,8.316,6.763,9.92c4.081,1.603,8.727,0.545,11.712-2.667 l135.509-145.92h198.016c5.891,0.011,10.675-4.757,10.686-10.648C437.353,349.198,436.226,346.473,434.215,344.467z'/%3E %3C/svg%3E"), pointer;
}
您可以在下面看到我们代码的运行结果：
希望这篇教程能帮助你为网站添加自定义滑块，或者至少让你了解如何使用它们。如有任何疑问，欢迎在评论区留言。👍
文章来源：https://dev.to/clementgaudiniere/custom-cursor-on-a-webpage-in-pure-css-1dmk