使用 CSS 创建自定义鼠标光标

作为您的用户和您的网站之间的中间人，光标可以限制或大大增强您的用户体验您的网站的方式。这就是为什么时尚、有意设计的自定义光标已成为当今 UI 和 UX 的重要组成部分。

自定义光标是一个以引人入胜的方式为用户提供指导并在您的网站上为他们创造令人难忘的沉浸式体验的机会。

有广泛的潜在用户可以为其创建自定义光标。示例包括使用投影仪学习的学生、行动不便的用户以及品牌针对的年轻受众。

在本教程中，我们将了解自定义光标是什么，并学习如何使用 CSS（和 JavaScript）创建自定义光标，从而为您的网站带来创意优势。我们将涵盖：

• CSS中的游标概述
• 如何使用 CSS 创建自定义光标
• 如何使用 JavaScript 创建自定义光标
• 创建自定义光标时的 UX 和浏览器兼容性
• 创建具有可访问性的自定义光标

要学习本教程，您应该具备一些 HTML、CSS 和 JavaScript 知识。

CSS中的游标概述

我们已经每天都在与自定义光标进行交互。当您将鼠标悬停在按钮上并且指针光标变为手形时，或者您将鼠标悬停在文本上并且光标变为文本光标时，这种交互性是通过自定义光标来实现的。

但是，我们可以通过光标为用户提供许多其他的创意体验。

在我们深入创建自己的自定义光标之前，您应该知道 CSS 为您提供了一些开箱即用的光标，用于一些经常执行的任务。

这些光标向您显示在您悬停的确切位置可以执行的操作。示例包括指示您应该单击链接、拖放元素、放大和缩小事物等的光标。

您所要做的就是使用 CSScursor属性指定您想要的光标类型。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

CSS 中的一些可用游标包括：

.auto { 光标：自动；}
.default { 光标：默认；}
.none { 光标：无；}
.context-menu { 光标：上下文菜单；}
.help { 光标：帮助；}
.pointer { 光标：指针；}
.progress { 光标：进度；}
.wait { 光标：等待；}
.cell { 光标：单元格；}
.crosshair { 光标：十字准线；}
.text { 光标：文本；}
.vertical-text { 光标：垂直文本；}
.alias { 光标：别名；}
.copy { 光标：复制；}
.move { 光标：移动；}
.no-drop { cursor: no-drop; }
.not-allowed { 游标：不允许；}
.all-scroll { 光标：全滚动；}
.col-resize { 光标：col-resize; }
.row-resize { 游标：行调整大小；}
.n-resize { 光标：n-resize; }
.e-resize { 光标：e-resize; }
.s-resize { 光标：s-resize; }
.w-resize { 光标：w-resize; }
.ns-resize { 光标：ns-resize; }
.ew-resize { 光标：ew-resize; }
.ne-resize { 光标：ne-resize; }
.nw-resize { 光标：nw-resize; }
.se-resize { 光标：se-resize; }
.sw-resize { 光标：sw-resize; }
.nesw-resize { 光标：nesw-resize; }
.nwse-resize { 光标：nwse-resize; }

将鼠标悬停在下面的框上以查看正在运行的光标：

​

​

查看代码并直接在 CodePen 上与不同的光标进行交互。

在此处查看CSS 光标的完整列表。

虽然这些游标很有用并且有一些基本的样式，但我们当然可以使用游标获得更多创意。

如何使用 CSS 创建自定义光标

使用 CSS 创建自定义光标是一个非常简单的过程。您必须采取的第一步是找到要用于替换默认光标的图像。您可以自己设计一个，也可以从FontAwesome 等图标库中获取适合您需求的免费 PNG 。

来自 LogRocket 的更多精彩文章：

• 不要错过来自 LogRocket 的精选时事通讯The Replay
• 使用 React 的 useEffect优化应用程序的性能
• 在多个 Node 版本之间切换
• 了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
• 探索 Tauri，一个用于构建二进制文件的新框架
• 比较NestJS 与 Express.js
• 发现TypeScript 领域中使用的流行 ORM

接下来，使用 .将 CSScursor属性指向图像的位置url。现在该cursor属性知道它打算使用该 URL 处的任何图像作为其光标。

身体 {
      光标：url（'path-to-image.png'），自动；
}

为确保在您网站的所有部分都使用此光标，使用该cursor属性的最佳位置是在bodyHTML 的标记中。但是，如果需要，您可以将自定义光标分配给特定元素而不是整个网站。

您还可以为您的财产增加fallback价值。cursor使用自定义 CSS 属性时，此值可确保如果用作自定义属性的图像由于某种原因丢失或无法加载，那么您的用户将有另一个选择。

在这种情况下，auto是您的自定义属性的fallback描述符。cursor如果自定义光标不可用，您的用户将看到常规光标。

您可以提供多个自定义光标（多个后备）供您的网站使用。您所要做的就是将它们的路径添加到cursor属性中。

身体 {
      光标：url('path-to-image.png'), url('path-to-image-2.svg'), url('path-to-image-3.jpeg'), auto;
}

上面的代码中有三个后备游标。

如何使用 JavaScript 创建自定义光标

使用 JavaScript 创建自定义光标涉及操作 DOM 元素。

基本上，我们将创建一些用作自定义光标的 DOM 元素，然后使用 JavaScript 来操作它们。然后，当我们四处移动光标时，这些自定义元素将作为我们的光标四处移动。

我们将使用 CSS 设计自定义光标，而不是设计图像或在线下载图像。我希望我们使用一些动画来吸引用户。将光标移动到下面的框上，以查看我所描述的示例：

​

​

查看完整代码并直接在 CodePen 上与此光标进行交互。

如您所见，光标由两个元素组成——一个大圆圈和一个小圆圈。我们将创建两个div元素并为其class命名：

<div class="cursor small"></div>
<div class="光标大"><div>

接下来，我们将使用 CSS 创建圆圈。在下面的代码中，我们将每个的宽度和高度分配给50px大圆圈。为了使它成为一个圆，我们给它一个边界半径50%。

小圆圈将是空心的，所以我们给它一个边界和边界半径50%。然后，我们为其分配一个宽度和高度6px。

cursor我们通过给定一个值来禁用默认光标，none以便我们可以在其位置呈现自定义光标。

要将动画添加到大圆圈，我们使用@keyframes.

我们的animation-duration是2.0s。在此持续时间开始时，我们设置background-color为green和opacity。0.2进行到一半时，我们将圆圈设置background-color为orange。在 2 秒持续时间结束时，我们将圆圈设置background-color为red。

为了让动画一遍又一遍地重复，我们设置animation-iteration-count为infinite.

身体{
  背景颜色：#171717；
  光标：无；
  高度：120vh；
}
。小的{
  宽度：6px；
  高度：6px；
  边框：2px 实心#fff;
  边界半径：50%；
}
。大的{
  宽度：50px；
  高度：50px；
  边界半径：50%；
  保证金底部：20rem；
  动画名称：拉伸；
            动画持续时间：2.0s；
            动画定时功能：缓出；
            动画方向：交替；
            动画迭代计数：无限；
            动画播放状态：正在运行；
}
​
​
@keyframes 拉伸 {
            0% {
​
                不透明度：0.2；
                背景颜色：绿色；
                边界半径：100%；
            }
​
            50% {
                背景颜色：橙色；
            }
​
            100% {
                背景颜色：红色；
            }
        }

现在，为了让元素在您移动鼠标时移动，我们将使用 JavaScript。

在下面的代码中，我们使用事件监听器来监听用户何时将鼠标移到我们的网页上。每当这个事件发生时，我们使用一个函数来获取鼠标的x坐标y。之后，我们使用x和y坐标来移动我们的div元素作为光标的代表。

const cursorSmall = document.querySelector('.small');
const cursorBig = document.querySelector('.big');
​
​
常量位置元素 = (e)=> {
  常量 mouseY = e.clientY;
  常量 mouseX = e.clientX;
​
  cursorSmall.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
​
  cursorBig.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
​
}
​
window.addEventListener('mousemove', positionElement)

在 CodePen 上查看交互式光标旁边的完整代码。

如您所见，我们过去常常querySelector访问divDOM 上的两个元素。然后，我们在网页中添加了一个事件监听器来监听和检测用户何时移动鼠标。

发生这种情况时，事件侦听器会触发一个positionElement函数。在这个函数中，我们将这些坐标映射到div我们已经选择了其 DOM 位置的元素。

我们使用 和 移动与鼠标的和坐标div相对应的元素。在水平和垂直方向重新定位元素，同时在 3D 空间中重新定位元素。x

y

transform

translate3d

transform``translate3d

随着鼠标的移动，它的x和y值会发生变化，transform并translate3d在事件监听器的帮助下得到更新，并且每个位置都会div相应地发生变化。

Soul音乐听歌神器，支持免费下载无损音乐，聚合多平台资源！

创建自定义光标时的 UX 和浏览器兼容性

创建自定义光标时，您应该始终牢记用户的最大利益。一种方法是创建一个最能代表或翻译元素本质的光标。

虽然自定义光标为您的网站提供了良好的触感和独特的感觉，但不要过度使用它很重要。过度自定义光标会使用户在您的网站上的体验复杂化，从而使他们感到沮丧和困惑。

在决定创建自定义光标之前，您应该考虑其功能。例如，自定义光标的功能能否在旧浏览器上正常运行？

请注意，一些较旧的浏览器无法支持许多新的 CSS 和 JavaScript 功能。如果您围绕使用用户浏览器之外的技术的自定义光标设计网站的某些区域，他们将无法与您的网站互动。

创建具有可访问性的自定义光标

如前所述，自定义光标对于行动不便和其他可访问性要求的用户很有帮助。例如，视力低下的人可能需要易于跟踪的非常大的鼠标指针，或者具有自定义颜色的鼠标指针，以使其在各种背景中脱颖而出。

还可以对鼠标进行编程，以反转其悬停在其上的任何元素的颜色。这使用户可以轻松跟踪他们在屏幕上阅读或看到的内容。文本光标或插入符号也可以加粗，以便视力不佳的用户在打字时不会忘记光标在页面上的位置。

大光标还可以使运动障碍用户受益，因为它们比小光标更容易移动和放置在元素上。

结论

在本教程中，我们了解了开箱即用的 CSS 光标，如何使用 CSS 创建自定义光标，如何为您的网页提供多个光标，以及如何使用 CSS 和 JavaScript 中的动画来创建自定义光标。

如果实施得当，自定义光标可以成为吸引用户、让他们参与并有效引导他们的好方法。如果您对使用 CSS 创建自定义光标有任何进一步的想法或问题，请在评论部分告诉我。

您的前端是否占用了用户的 CPU？

随着 Web 前端变得越来越复杂，资源贪婪的功能对浏览器的要求也越来越高。如果您对监控和跟踪生产环境中所有用户的客户端 CPU 使用情况、内存使用情况等感兴趣，请尝试使用 LogRocket。

LogRocket就像一个用于 Web 和移动应用程序的 DVR，记录您的 Web 应用程序或网站中发生的一切。无需猜测问题发生的原因，您可以汇总和报告关键前端性能指标、重放用户会话以及应用程序状态、记录网络请求并自动显示所有错误