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

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

作为用户和网站之间的中间人，游标既可以限制用户体验网站的方式，也可以大大增强用户体验网站的方式。而自定义游标是一个机会，以一种吸引人的方式为你的用户指明方向，并在你的网站上为他们创造一个难忘的、沉浸式的体验。

在本教程中，我们将了解什么是自定义游标，并学习如何使用 CSS （和 JavaScript）创建自定义游标，使你的网站具有创造性的优势。

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

1. CSS 中的游标概述

我们每天都在使用自定义游标。当你将鼠标悬停在按钮上时，指针游标变为一只手，或者将鼠标悬停在文本上时，游标变为文本游标时，这种交互性是通过自定义游标实现的。

然而，我们还可以通过游标为用户提供许多其他创造性的体验。在开始创建我们自己的自定义游标之前，你应该知道 CSS 为一些经常执行的任务提供了开箱即用的游标。

这些游标向你显示在你悬停的确切位置可以做什么，包括指示你应该单击链接、拖放元素、放大和缩小物体等等。你所要做的就是使用 CSS cursor 属性指定你想要的游标类型。

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

.auto            { cursor: auto; }
.default         { cursor: default; }
.none            { cursor: none; }
.context-menu    { cursor: context-menu; }
.help            { cursor: help; }
.pointer         { cursor: pointer; }
.progress        { cursor: progress; }
.wait            { cursor: wait; }
.cell            { cursor: cell; }
.crosshair       { cursor: crosshair; }
.text            { cursor: text; }
.vertical-text   { cursor: vertical-text; }
.alias           { cursor: alias; }
.copy            { cursor: copy; }
.move            { cursor: move; }
.no-drop         { cursor: no-drop; }
.not-allowed     { cursor: not-allowed; }
.all-scroll      { cursor: all-scroll; }
.col-resize      { cursor: col-resize; }
.row-resize      { cursor: row-resize; }
.n-resize        { cursor: n-resize; }
.e-resize        { cursor: e-resize; }
.s-resize        { cursor: s-resize; }
.w-resize        { cursor: w-resize; }
.ns-resize       { cursor: ns-resize; }
.ew-resize       { cursor: ew-resize; }
.ne-resize       { cursor: ne-resize; }
.nw-resize       { cursor: nw-resize; }
.se-resize       { cursor: se-resize; }
.sw-resize       { cursor: sw-resize; }
.nesw-resize     { cursor: nesw-resize; }
.nwse-resize     { cursor: nwse-resize; }

点击这里查看 CSS 游标的完整列表。

虽然这些游标很有用，并且具有一些基本的样式，但我们当然可以在游标上取得更大的创造性。

2. 如何用 CSS 创建一个自定义游标

使用 CSS 创建自定义游标是一个非常简单的过程。你必须采取的第一步是找到要用来替换默认游标的图像。你可以自己设计一个，也可以从一些图标库中获得一个符合你需要的免费 PNG。

接下来，使用 url 将 CSS cursor 属性指向图像的位置。现在 cursor 属性知道它将使用 URL 中的任何图像作为它的游标。

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

为了确保这个游标在你网站的所有部分都被使用，使用 cursor 属性的最佳位置是在你的 HTML 的 body 标签中。但是，如果你愿意，你可以将自定义游标分配到特定元素，而不是整个网站。

还可以向 cursor 属性添加回退值。在使用自定义CSS属性时，该值确保如果作为自定义属性的图像由于某种原因丢失或无法加载，那么用户将有另一个选项。

在本例中，auto 是自定义 cursor 属性的回退描述符。如果定制游标不可用，用户将看到常规游标。你可以为你的网站提供多个自定义游标（多个后备）。你所要做的就是将它们的路径添加到 cursor 属性中。

body {
	cursor: url('path-to-image.png'), url('path-to-image-2.svg'), url('path-to-image-3.jpeg'), auto;
}

上面的代码中有三个回退游标。

3. 如何用 JavaScript 创建自定义游标

使用 JavaScript 创建自定义游标涉及到操作 DOM 元素。我们将创建一些 DOM 元素作为自定义游标，然后使用 JavaScript 操作它们。然后，当我们移动游标时，这些自定义元素也会随着我们的游标移动。

我们将使用 CSS 设计自定义游标，而不是设计图像或在线下载图像。我希望我们能够使用一些能够吸引用户的动画内容。移动你的游标在下面的方框里面，效果如下：

如你所见，游标由两个元素组成——一个大圆和一个小圆。我们将创建两个 div 元素，并为它们的 class 命名 ：

<div class="cursor small"></div>
<div class="cursor big"><div>

接下来，我们将用 CSS 创建圆。在下面的代码中，我们为大圆分配了宽和高各 50px 的值。为了使它成为一个圆，我们给它的 border-radius 为 50%。小圆将是中空的，所以我们给它一个 border 和 border-radius 为 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。

body{
  background-color: #171717;
  cursor: none;
  height: 120vh;
}
.small{
  width: 6px;
  height: 6px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.big{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20rem;
  animation-name: stretch;
            animation-duration: 2.0s;
            animation-timing-function: ease-out;
            animation-direction: alternate;
            animation-iteration-count: infinite;
            animation-play-state: running;
}


@keyframes stretch {
  0% {
    opacity: 0.2;
    background-color: green;
    border-radius: 100%;
  }

  50% {
    background-color: orange;
  }

  100% {
    background-color: red;
  }
}

现在，为了使元素随着鼠标移动而移动，我们将使用 JavaScript。

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

const cursorSmall = document.querySelector('.small');
const cursorBig = document.querySelector('.big');


const positionElement = (e)=> {
  const mouseY = e.clientY;
  const 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)

如你所见，我们使用 querySelector 来访问 DOM 上的两个 div 元素。然后，我们在网页中添加了一个事件监听器来监听和检测用户何时移动鼠标。当发生这种情况时，事件监听器触发 positionElement 函数。在这个函数中，我们将这些坐标更新到 DOM 位置已经选定的 div 元素。

我们使用 transform 和 transllate3d 将 div 元素移动到与鼠标的 x 和 y 坐标相对应的位置。transform 在水平和垂直方向上重新定位元素，而 transllate3d 在 3D 空间中重新定位元素。当鼠标移动时，它的 x 和 y 值会发生变化，transform 和 translate3d 会在事件监听器的帮助下更新，每个 div 的位置也会相应发生变化。

4. 浏览器兼容性

在决定创建自定义游标之前，应该考虑它的功能。例如，自定义游标的功能在旧浏览器上是否能正常工作？

注意，一些较老的浏览器不具备支持许多新的 CSS 和 JavaScript 特性的能力。如果你在网站的某些区域设计了一个自定义游标，使用了超出用户浏览器的技术，他们将无法参与到你的网站中。

5. 自定义游标的可访问性

自定义游标对于移动能力受损和有其他可访问性需求的用户是有帮助的。例如，视力低下的人可能需要非常大的鼠标指针，以便于跟踪，或者定制颜色的鼠标指针，使其在各种背景中突显而出。

鼠标还可以通过编程使它所经过的任何元素的颜色颠倒。这使得用户可以很容易地跟踪他们正在阅读或在屏幕上看到的内容。文本游标或插入符号也可以加厚，以便视力较低的用户在打字时不会迷失游标在页面上的位置。

6. 小结

在本教程中，我们学习了开箱即用的 CSS 游标，如何使用 CSS 创建自定义游标，如何为网页提供多个游标，以及如何在 CSS 和 JavaScript 中使用动画来创建自定义游标。如果实现正确，自定义游标可以是吸引用户、保持用户参与和有效引导用户的好方法。