如何实现类似brandyandcoco网站的自定义鼠标光标？

我喜欢那种双圆形跟随鼠标的光标效果，研究后找到了可行的实现方案——确实需要用到JavaScript来监听鼠标移动并更新元素位置，搭配CSS定义光标样式。以下是完整实现代码：

HTML 结构 #

<span class="ball"></span>
<span class="ball2"></span>

CSS 样式 #

.ball {
  display: block;
  background: #c8c8c8;
  position: fixed;
  z-index: 1000;
  width: 32px;
  height: 32px;
  opacity: 0.5;
  border-radius: 100%;
}

.ball2 {
  pointer-events: none;
  display: block;
  background: #c8c8c8;
  position: fixed;
  z-index: 1000;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  transition: left 80ms ease-out, top 80ms ease-out, box-shadow 60ms ease-out,
    opacity 0ms 300ms;
}

JavaScript 逻辑 #

var ball = document.querySelectorAll(".ball");
var ball2 = document.querySelectorAll(".ball2");

document.addEventListener("mousemove", fn, false);

function fn(e) {
  for (var i = ball.length; i--; ) {
                /* -16 是 .ball 宽高的一半，用于让圆心对齐鼠标位置 */
    ball[i].style.left = e.clientX - 16 + "px";
    ball[i].style.top = e.clientY - 16 + "px";
  }
  for (var i = ball2.length; i--; ) {
    
    ball2[i].style.left = e.clientX - 5 + "px";
    ball2[i].style.top = e.clientY - 5 + "px";
    
  }
}

实现说明 #

• CSS 负责绘制两个圆形光标元素：.ball是半透明大圈，.ball2是小圈，设置pointer-events: none避免干扰页面其他元素的交互；固定定位+高z-index确保光标始终在页面最上层。
• JavaScript 通过监听mousemove事件获取鼠标坐标，实时更新两个圆形元素的位置，减去元素宽高的一半是为了让圆心和鼠标点对齐，保证视觉上的跟随效果。

内容的提问来源于stack exchange，提问作者weti