本文详解如何在保持文字默认线性渐变的前提下，实现鼠标悬停单个字母时，以30×30px圆形区域叠加同源渐变的视觉效果，解决透明填充导致事件丢失、渐变覆盖失效等核心问题。
要实现「每个字母悬停时触发一个30px×30px圆形渐变高亮」，且默认状态与悬停状态均使用相同渐变色（如 linear-gradient(180deg, rgba(255, 33, 44, 0.5) 0%, rgba(25, 50, 25, 0.3) 100%)），关键在于：不能依赖文字本身变形为圆，而应通过绝对定位的独立圆形遮罩层动态跟随鼠标，并精准锚定到当前悬停字母的中心位置。
✅ 正确思路：分离渲染层 + 动态定位遮罩
文字（.span）仅负责显示默认渐变（通过 background-clip: text），而悬停效果由一个独立的、透明填充（fill: transparent）但带描边/渐变填充的 但注意：原代码中 你原先尝试直接修改文字自身样式来生成圆形是不可行的——CSS 无法将文本渲染为带渐变的圆形区域。正确路径是：文字负责内容与默认渐变，独立 DOM 元素负责悬停遮罩，通过 JS 精确定位+GSAP 平滑动画协同工作。此方案兼顾性能、可维护性与设计还原度，且完全支持双状态渐变一致性。✅ 推荐实现（CSS + JS 结合）
.hover-circle {
position: absolute;
top: 0; left: 0;
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(255, 33, 44, 0.5) 0%, rgba(25, 50, 25, 0.3) 100%);
transform: translate(-50%, -50%); /* 使中心对齐鼠标 */
pointer-events: none; /* 确保不拦截底层文字事件 */
opacity: 0;
transition: opacity 0.3s ease;
}// 修改 onMouseHover / onMouseHoverOut 逻辑，绑定到具体字母
document.querySelectorAll('.color-letters span').forEach(span => {
span.addEventListener('mouseenter', (e) => {
const rect = e.target.getBoundingClientRect();
const x = rect.left + rect.width / 2;
const y = rect.top + rect.height / 2;
TweenMax.to(bigBall, 0.3, {
scale: 1,
opacity: 1,
x: x - 15, // 减半宽高实现中心对齐
y: y - 15,
ease: Power2.easeOut
});
});
span.addEventListener('mouseleave', () => {
TweenMax.to(bigBall, 0.3, {
opacity: 0,
ease: Power2.easeIn
});
});
});? 关键点说明：文字默认渐变通过 background-clip: text 实现，完全独立于遮罩层；遮罩层（.hover-circle）使用 pointer-events: none，避免抢夺鼠标事件；opacity 控制显隐，比 scale 更精准控制圆形范围（scale: 4 会放大整个 SVG 容器，破坏 30px 精度）；每个 包裹单个字母（
⚠️ 注意事项
✅ 总结
