如何实现类似示例图的带环形动画效果的自定义cursor（光标）

要实现带外围圆形动画的自定义光标，仅靠CSS cursor 属性无法完成——因为浏览器会将cursor引入的SVG资源作为静态位图渲染，内置的动画不会生效。你需要改用DOM元素模拟光标的方案，具体实现如下：

• 第一步：隐藏原生默认光标

* {
  cursor: none;
}

• 第二步：添加模拟光标的DOM结构，分别对应中心红点和外围动画圆环

<div class="cursor-core"></div>
<div class="cursor-ring"></div>

• 第三步：编写光标样式和圆环脉动动画

/* 公共样式：禁止光标元素拦截页面交互 */
.cursor-core, .cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
}

/* 中心红点：和你原有自定义光标效果完全一致 */
.cursor-core {
  width: 7px;
  height: 7px;
  background-color: #FF3265;
}

/* 外围动画圆环 */
.cursor-ring {
  width: 30px;
  height: 30px;
  border: 2px solid #FF3265;
  /* 动画参数可根据需求调整大小、速度、透明度 */
  animation: ringPulse 1.5s infinite ease-in-out;
}

@keyframes ringPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.7;
  }
}

• 第四步：添加JS逻辑同步光标位置

const cursorCore = document.querySelector('.cursor-core');
const cursorRing = document.querySelector('.cursor-ring');

document.addEventListener('mousemove', (e) => {
  // 同步中心红点位置
  cursorCore.style.left = `${e.clientX}px`;
  cursorCore.style.top = `${e.clientY}px`;
  // 可选：给圆环加微小延迟，让动效更丝滑自然
  setTimeout(() => {
    cursorRing.style.left = `${e.clientX}px`;
    cursorRing.style.top = `${e.clientY}px`;
  }, 50);
});

如果需要点击交互反馈，额外监听mousedown、mouseup事件修改圆环的缩放、颜色参数即可。

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