嘿，这个效果我太熟了！其实它本质上是光标跟随动画，核心是用JavaScript监听鼠标移动，然后让自定义光标元素以平滑的动画追赶真实鼠标位置，而不是直接绑定位置——这就产生了你说的那种略带延迟、顺滑带轨迹的优雅感。下面我一步步拆解实现方法：

1. 隐藏系统默认光标 #

首先得把浏览器自带的光标藏起来，避免和自定义光标冲突：

body {
  cursor: none; /* 隐藏默认光标 */
}

2. 创建自定义光标元素 #

在HTML里添加一个用来模拟光标的元素，比如一个简洁的小圆点：

<div class="custom-cursor"></div>

给它加基础样式，确保它能覆盖在所有内容上方且不干扰真实交互：

.custom-cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #000;
  pointer-events: none; /* 关键！不让自定义光标拦截鼠标事件 */
  z-index: 9999; /* 确保在页面所有元素之上 */
  opacity: 0.8;
}

3. 用JS实现平滑跟随逻辑 #

核心是缓动函数，让自定义光标逐步逼近真实鼠标位置，而不是瞬间跳转。这里用requestAnimationFrame来实现流畅的动画循环：

// 获取自定义光标元素
const cursor = document.querySelector('.custom-cursor');

// 存储真实鼠标位置和光标当前位置
let mouseX = 0;
let mouseY = 0;
let cursorX = 0;
let cursorY = 0;

// 监听鼠标移动，实时更新真实鼠标坐标
document.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

// 动画循环：让光标平滑追赶鼠标位置
function animateCursor() {
  // 缓动系数，值越小延迟越高、动画越顺滑（0.1-0.3区间效果最佳）
  const ease = 0.15;
  
  // 计算光标需要移动的距离，逐步逼近真实位置
  cursorX += (mouseX - cursorX) * ease;
  cursorY += (mouseY - cursorY) * ease;
  
  // 更新光标位置
  cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
  
  // 持续执行动画
  requestAnimationFrame(animateCursor);
}

// 启动动画
animateCursor();

4. 进阶优化：添加拖尾效果（可选） #

如果想要更贴近你说的“可见轨迹”，可以叠加多个光标元素，给不同元素设置不同的缓动系数，形成拖尾效果：

// 创建拖尾光标元素
const tailCursor = document.createElement('div');
tailCursor.classList.add('custom-cursor', 'cursor-tail');
document.body.appendChild(tailCursor);

// 修改动画函数，同时更新主光标和拖尾
function animateCursor() {
  const mainEase = 0.15;
  const tailEase = 0.08; // 拖尾用更小的系数，延迟更高
  
  // 更新主光标位置
  cursorX += (mouseX - cursorX) * mainEase;
  cursorY += (mouseY - cursorY) * mainEase;
  
  // 更新拖尾光标位置
  let tailX = parseFloat(tailCursor.style.transform.split(',')[0].replace('translate(', '')) || 0;
  let tailY = parseFloat(tailCursor.style.transform.split(',')[1].replace('px)', '')) || 0;
  tailX += (mouseX - tailX) * tailEase;
  tailY += (mouseY - tailY) * tailEase;
  
  // 应用位置变换
  cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
  tailCursor.style.transform = `translate(${tailX}px, ${tailY}px)`;
  
  requestAnimationFrame(animateCursor);
}

给拖尾光标加对应的样式：

.cursor-tail {
  width: 20px;
  height: 20px;
  opacity: 0.3;
  background-color: #000;
}

这种效果的关键就是缓动算法和requestAnimationFrame的结合，它让光标移动不是硬邦邦的瞬间到位，而是有一个自然的过渡过程——你说的那种微妙的优雅感，就是这么来的。调整缓动系数就能控制延迟和顺滑程度，完全可以根据自己的需求定制。

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