如何为网站实现类似VSCode的光标平滑Caret动画效果？

你之前尝试的全局过渡代码无法生效，原因是：浏览器原生光标（caret）的位置变化由内部引擎控制，不属于CSS transition 能直接作用的可动画属性，所以* { transition: all 80ms; } 对光标移动完全无效。

要实现VS Code那种光标平滑移动的效果，需要通过模拟光标+JS实时定位的方式来实现，以下是可行方案：

方案：JS + CSS 模拟平滑光标 #

1. CSS 样式 #

/* 隐藏原生光标 */
.custom-caret {
  caret-color: transparent;
  position: relative;
}

/* 模拟VS Code风格的平滑光标 */
.smooth-caret {
  position: absolute;
  width: 2px;
  height: 1.2em; /* 可根据字体调整高度 */
  background-color: #2563eb; /* VS Code默认光标蓝色 */
  pointer-events: none; /* 避免干扰输入交互 */
  transition: left 80ms ease-out; /* 匹配VS Code的平滑速度 */
}

2. JavaScript 逻辑 #

// 给所有需要平滑光标的输入元素绑定逻辑
const inputElements = document.querySelectorAll('input[type="text"], textarea');

inputElements.forEach(input => {
  input.classList.add('custom-caret');
  
  // 创建模拟光标元素
  const caretEl = document.createElement('span');
  caretEl.classList.add('smooth-caret');
  input.parentElement.appendChild(caretEl);

  // 更新光标位置的核心函数
  function syncCaretPosition() {
    const selection = window.getSelection();
    if (!selection.rangeCount) return;

    const range = selection.getRangeAt(0);
    const inputRect = input.getBoundingClientRect();
    const caretRect = range.getBoundingClientRect();

    // 计算相对位置并更新模拟光标
    caretEl.style.left = `${caretRect.left - inputRect.left + input.scrollLeft}px`;
    caretEl.style.top = `${caretRect.top - inputRect.top + input.scrollTop}px`;
  }

  // 绑定触发光标位置变化的事件
  input.addEventListener('input', syncCaretPosition);
  input.addEventListener('click', syncCaretPosition);
  input.addEventListener('keyup', syncCaretPosition);
  document.addEventListener('selectionchange', syncCaretPosition);

  // 初始化光标位置
  syncCaretPosition();
});

方案说明 #

• 通过caret-color: transparent隐藏原生光标，用独立的span元素模拟光标
• 监听输入框的各类交互事件（输入、点击、按键、选区变化），实时获取原生光标位置
• 利用CSS transition 属性让模拟光标平滑过渡到目标位置，实现类似VS Code的动画效果

你可以根据需求调整光标颜色、宽度、过渡时间等参数，适配网站的整体风格。

内容的提问来源于stack exchange，提问作者Mohtasim Alam Sohom