原文： How to Make a Custom Mouse Cursor with CSS and JavaScript

你是否曾经访问过一个网站，并为其功能感到惊讶？其中一个可能是一个很酷的鼠标光标，与你习惯的常规箭头或指针光标不同。

这确实可以改善用户体验，最近我一直在想它是如何工作的。所以我开始做一些研究，我发现了它是如何做到的。

在这篇文章中，我将解释如何制作一个自定义的鼠标指针。在本文结束时，你将学会如何用两种不同的方法制作这些光标，即使用 CSS 和 JavaScript。然后，你将准备好用不同的创意光标来美化你的网站，以增加互动性。准备好了吗？让我们开始吧。

前提

本文对初学者友好，但要理解一些概念，你应该具备以下基本知识：

  • HTML
  • 基本的 CSS
  • 基本的 JavaScript

如何用 CSS 定制鼠标光标

用 CSS 来定制鼠标指针是非常简单的，因为 CSS 已经有一个属性来处理这个问题。我们所要做的就是识别这个属性并使用它。

作为前端工程师，我们经常使用这个属性，它就是万能的 cursor 属性。是的，这个属性让我们有能力制作一个自定义游标。

在我们去看一个实际的例子之前，让我们先看看与 CSS cursor 属性相关的值。虽然大多数开发者只使用了几个重要的值，但还有更多的值是我们应该看的。

所有 CSS 光标的可视化展示

从上面的代码片断和结果来看，你可以通过将鼠标光标悬停在包含每个 CSS cursor 属性值名称的那些方框上，看到并测试出 CSS 的不同鼠标光标。

现在，我如何使用 CSS 来定制鼠标光标？要使用这个方法，你只需要告诉 CSS 你打算用什么图片，并使用 url 值将 cursor 属性指向图片的 URL。

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

从上面的代码片段中，你可以看到我在文档主体上设置了这个，所以无论光标在哪里移动，它都可以适用于光标。它有在 url() 中指定的图像。

该属性的下一个值是一个后备值，以备图片无法加载或由于一些内部故障而无法找到。我相信你不希望你的网站“没有光标“，所以添加一个回退是非常重要的。你也可以根据需求添加尽可能多的后备 URL。

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

你也可以在你的网页的某个特定元素或部分上定制光标。下面是一个 CodePen 的例子：

在网页的不同元素上使用不同的自定义光标

这就是在 CSS 中定制光标的全部内容。现在让我们来看看如何在 JavaScript 中做到这一点。

如何用 JavaScript 制作自定义鼠标光标

为了用 JavaScript 实现这一点，你需要操作 DOM 来获得所需的结果。

首先，让我们看看 HTML：

HTML

<div class="cursor rounded"></div>
<div class="cursor pointed"><div>

从上面的代码片段中，我创建了两个 div 来表示光标。我们的计划是通过 JavaScript 来操作这些 div，这样它们在网页上的移动就会被 JavaScript 的 mousemove 事件利用鼠标移动的 X 和 Y 坐标进行滚动。

现在让我们来看看 CSS 的部分，这将使我们的工作更有意义。

如何用 CSS 设计自定义光标的样式

body{
  background-color: #1D1E22;
  cursor: none;
}

.rounded{
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.pointed{
  width: 7px;
  height: 7px;
  background-color: white;
  border-radius: 50%;
}

看一下上面的 CSS 代码，我禁用了光标（记得 cursor:none 吗）， 这将使光标不可见，只允许我们的自定义光标显示。

我对这些 div 设置了样式，使它们具有独特的“光标式”外观。你绝对可以用它做得更多，也许可以添加背景图片、表情符号、贴纸等等，只要有图片就可以了。现在，让我们看一下 JavaScript。

如何使用 JavaScript 来使光标移动

const cursorRounded = document.querySelector('.rounded');
const cursorPointed = document.querySelector('.pointed');


const moveCursor = (e)=> {
  const mouseY = e.clientY;
  const mouseX = e.clientX;
   
  cursorRounded.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
  
  cursorPointed.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
 
}

window.addEventListener('mousemove', moveCursor)

我在全局窗口对象上添加了一个事件监听器来监听任何鼠标移动。当鼠标移动时，moveCursor 函数表达式被调用，它接收事件对象作为参数。有了这个参数，我就能在页面的任何一点上获得鼠标的 X 和 Y 坐标。

我已经使 用JavaScript querySelector 从 DOM 中选择了每种光标。所以我所要做的就是根据鼠标的 X 和 Y 坐标移动它们，方法是用 translate3d 值控制样式上的 transform 属性。这样，当鼠标移动到网页上的任何一点时，这些 div 就能移动。

而你所看到的反斜线被称为模板字面量。这样就可以很容易地写出变量，把它们附加到字符串中。另一种方法是将变量与字符串连接起来。

很简单，对吗？

下面是一个 CodePen 示例和上述代码片段的结果：

使用 JavaScript 自定义鼠标指针

哪种方法效果最好

现在就看你作为开发者选择哪种最适合你的方法了。如果你想使用一些漂亮的表情符号或图像作为光标，你可以选择使用 CSS。另一方面，你可能想使用 JavaScript，这样你就可以根据自己的选择定制复杂的形状，并对光标的移动进行动画处理。

无论哪种方式都可以，只要你能得到你想要的结果，并打动你的网站的所有访问者。

我希望你从这篇文章中学到了很多东西，我期待着看到你用这些知识建立的网站。

想了解更多的 CSS 技巧，请在 Twitter 上关注我。

谢谢你阅读本文。