华丽的视觉：用CSS和JS制作圆形文本鼠标光标动画效果

用 CSS 和 JS 制作令人惊叹的圆形文本鼠标光标动画效果

厌倦了传统的鼠标指针？想要让你的网页在细节上也与众不同吗？快来尝试用 CSS 和 JS 制作圆形文本鼠标光标动画效果吧！随着鼠标的移动，由文字环绕组成的圆形中心圆点会代替鼠标指针，让人眼前一亮。

一、初识圆形文本鼠标光标动画效果

这款动画效果可不是简单的花哨噱头，它将为你的网页增添一抹个性和趣味。当鼠标移动时，圆形中心圆点会随着鼠标的移动而移动。但它不仅仅是简单的跟随，文本和阴影还会根据鼠标移动时产生变化，增添了动画效果的趣味性。

最引人注目的莫过于圆形中心圆点在鼠标移动时会转圈，同时转动过程中会有持续的颜色变化。随着鼠标的移动，颜色会从一种渐变到另一种，为动画效果增添了动态感和吸引力。

二、CSS 实现方法：赋予动画效果风格

实现圆形文本鼠标光标动画效果的第一步是使用 CSS。CSS 是层叠样式表，负责网页的视觉表现。使用 CSS，我们可以设置鼠标光标的样式，使其呈现出圆形文本效果。

/* 鼠标光标样式 */
#cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #000;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: #000;
}

/* 鼠标光标文字内容 */
#cursor span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 鼠标光标颜色变化 */
#cursor:hover {
  background: #00f;
  color: #fff;
}

在上面的 CSS 代码中，我们定义了鼠标光标的样式。#cursor 元素表示鼠标光标，它是一个 50x50 像素的圆形，带有白色背景和黑色阴影。为了让文本在圆形中心对齐，我们使用了 text-align: center 和 line-height: 50px 属性。最后，我们添加了一个 hover 状态，当鼠标悬停在光标上时，会将背景颜色更改为蓝色，并将文本颜色更改为白色。

三、JS 实现方法：让动画效果动起来

CSS 负责视觉效果，而 JavaScript (JS) 则负责让动画效果动起来。JS 是一种编程语言，允许我们动态地控制网页元素。在我们的案例中，我们将使用 JS 来获取鼠标位置并相应地移动圆形中心圆点。

/* 获取鼠标位置 */
const getMousePosition = (e) => {
  return {
    x: e.clientX,
    y: e.clientY,
  };
};

/* 设置鼠标光标位置 */
const setCursorPosition = (x, y) => {
  document.getElementById("cursor").style.left = x + "px";
  document.getElementById("cursor").style.top = y + "px";
};

/* 添加事件监听器 */
document.addEventListener("mousemove", (e) => {
  const mousePosition = getMousePosition(e);
  setCursorPosition(mousePosition.x, mousePosition.y);
});

在上面的 JS 代码中，我们定义了三个函数。getMousePosition 函数获取鼠标的位置，而 setCursorPosition 函数根据鼠标位置设置圆形中心圆点的位置。最后，我们添加了一个事件监听器，当鼠标移动时调用 setCursorPosition 函数，确保圆形中心圆点始终跟随鼠标。

四、动画效果展示：体验圆形文本鼠标光标动画效果的魅力

现在，让我们来看看动画效果的展示：

• 当鼠标移动时，圆形中心圆点会随着鼠标的移动而移动，宛如一个忠实的小伙伴。
• 文本和阴影会根据鼠标移动时产生变化，仿佛在与你玩一场互动游戏。
• 鼠标移动时，圆形中心圆点会转圈，同时转动过程中会有持续的颜色变化，犹如一个五彩缤纷的万花筒。

五、结语：提升你的网页，享受圆形文本鼠标光标动画效果的乐趣

这就是用 CSS 和 JS 制作圆形文本鼠标光标动画效果的完整步骤。快来试试吧，让你的网页更具吸引力！无论你是网页设计师、开发者还是只是想让你的网页与众不同，这款动画效果都是提升用户体验和留下持久印象的绝佳方式。

常见问题解答

1. 如何自定义文本？

要自定义文本，只需在 CSS 中修改 #cursor span 元素的内容。例如，要将文本更改为 "欢迎"，请使用以下代码：

#cursor span {
  content: "欢迎";
}

2. 如何更改圆形中心圆点的颜色？

要更改圆形中心圆点的颜色，请修改 CSS 中 #cursor 元素的 background 属性。例如，要将颜色更改为绿色，请使用以下代码：

#cursor {
  background: green;
}

3. 如何更改圆形中心圆点的大小？

要更改圆形中心圆点的尺寸，请修改 CSS 中 #cursor 元素的 width 和 height 属性。例如，要将其放大到 75x75 像素，请使用以下代码：

#cursor {
  width: 75px;
  height: 75px;
}

4. 如何禁用动画效果？

要禁用动画效果，请从 JS 代码中删除以下事件监听器：

document.addEventListener("mousemove", (e) => {
  // ...
});

5. 动画效果兼容哪些浏览器？

圆形文本鼠标光标动画效果兼容所有现代浏览器，包括 Chrome、Firefox、Safari、Edge 和 Opera。