您是否曾经访问过网站并被其惊人的功能所震撼？其中之一可能是一个很酷的鼠标光标，它不同于您习惯的常规箭头或指针光标。这确实改善了用户体验，最近我一直在想它是如何工作的。所以我开始做一些研究，我发现了它是如何完成的。在这篇文章中，我解释了如何制作自定义鼠标光标。到本文结束时，您将了解如何使用两种不同的方法（CSS和JavaScript）制作这些游标。然后，您将准备好使用不同的创意光标为您的网站增添趣味，以保持观众的参与度。如何使用CSS自定义鼠标光标使用CSS自定义鼠标光标非常容易，因为CSS已经有一个属性来处理它。我们需要做的就是识别这个属性并使用它。作为前端工程师，我们经常会用到这个属性——它就是万能游标属性。是的，这个属性允许我们制作我们选择的自定义光标。在进入实际示例之前，让我们看一下与CSS游标属性关联的值。虽然大多数开发人员只使用一些重要的，但我们应该关注更多。从上图中可以看到每个CSS游标属性值名称和对应值的描述。现在如何使用CSS自定义鼠标光标？要使用它，您只需告诉CSS您打算使用什么图像，并使用该url值将cursor属性指向图像URL。从上面的代码片段中，您可以看到我在文档文本上设置了它，因此它适用于光标移动的任何位置。它具有指定的图像url()。此属性的下一个值是回退，以防图像未加载或可能由于某些内部故障而找不到。我确定您不希望您的网站“无光标”，因此添加后备很重要。您还可以根据需要添加任意数量的后备URL。您还可以自定义网页特定元素或部分上的光标。这是一个CodePen示例：这就是CSS中自定义游标的全部内容。现在让我们看看如何使用JavaScript来做到这一点。如何使用JavaScript制作自定义鼠标光标要使用JavaScript执行此操作，您需要操作DOM以获得所需的结果。首先，让我们看一下HTML：在上面的代码片段中，我创建了两个div来表示光标。计划是从JavaScript操作这些div，以便它们在网页上的移动由JavaScriptmousemove事件使用鼠标移动的X和Y坐标滚动。现在让我们看看CSS部分，这将是一件有意义的事情。如何使用CSS设置自定义光标的样式查看上面的CSS代码，我禁用了光标（还记得cursor:none吗？）。这将使光标不可见，只允许显示我们的自定义光标。我设计了div的样式以赋予它们独特的“类似光标”的外观。你绝对可以用它做更多的事情，如果你有图像，可以添加背景图像、表情符号、贴纸等等。现在，让我们看看JavaScript如何使用JavaScript使光标移动。我在全局窗口对象上添加了一个事件监听器来监听任何鼠标移动。当鼠标移动时，会调用moveCursor函数表达式并接收事件对象作为参数。使用此参数，我可以获取页面上任意位置鼠标的X和Y坐标。我使用javascript从DOM中选择了每种类型的游标querySelector。所以我所要做的就是根据鼠标的X和Y坐标移动它们，使用translate3d值来控制样式上的变换属性。当鼠标移动到网页上的任意点时，这将使div移动。您看到的反引号称为模板文字。这使得编写变量以将它们附加到字符串变得容易。另一种方法是将变量连接到字符串。哪种方法效果最好？现在由您作为开发人员来选择最适合您的方法。如果你想使用一些漂亮的表情符号或图像作为你的光标，你可以选择使用CSS。另一方面，您可能希望使用JavaScript，以便自定义您选择的复杂形状并为光标的移动设置动画。无论哪种方式都很好，只要您获得所需的结果并让您网站的所有访问者惊叹不已。*原文链接：https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/
