本文详解如何在保持文字默认线性渐变色的基础上，实现鼠标悬停单个字母时，以30×30px圆形区域叠加另一层渐变蒙版（非填充色），且不破坏文字可交互性与视觉一致性。
要实现「文字常态为渐变色 + 悬停单个字母时出现30px×30px圆形渐变高亮」的效果，核心难点在于：纯文本无法直接应用圆形裁剪或局部遮罩；fill: transparent 会丢失事件捕获；CSS background-clip: text 不支持 hover 局部重绘。因此，必须采用「语义化拆分 + 定位覆盖」的方案，而非试图直接修改 <span> 的背景行为。
✅ 正确思路：将每个字母封装为独立可定位容器
原代码中 <span class="color-letters">Get to know...</span> 是一个整体，无法对单个字母做独立 hover 响应和圆形定位。需先将文本逐字拆解为带唯一坐标的 <span> 或 <div> 元素，并为其添加绝对定位能力：
<div class="myText">
<h1>
<span class="letter" style="--i:0;">G</span>
<span class="letter" style="--i:1;">e</span>
<span class="letter" style="--i:2;">t</span>
<!-- ...其余字母依此类推 -->
</h1>
</div>配合 CSS 实现基础渐变文字效果（保持原逻辑）：
.letter {
display: inline-block;
position: relative;
color: transparent;
background: linear-gradient(180deg, rgba(26, 33, 44, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
background-clip: text;
-webkit-background-clip: text;
/* 关键：启用 pointer-events，确保可触发 hover */
pointer-events: auto;
}
/* 悬停时显示圆形高亮蒙版（伪元素） */
.letter:hover::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: linear-gradient(180deg, rgba(255, 33, 44, 0.5) 0%, rgba(25, 50, 25, 0.3) 100%);
z-index: 1;
mix-blend-mode: overlay; /* 避免遮盖文字，用混合模式叠加 */
}? 为什么不用 fill: transparent 导致失焦？ 因为 transparent 是颜色值，不影响 pointer-events；真正导致失焦的是父容器（如 .myText）设置了 pointer-events: none，或 .letter 未显式声明 pointer-events: auto（默认为 auto，但若祖先设为 none 则继承）。务必检查并显式启用。
✅ 动态光标联动（适配圆形高亮）
你已用 GSAP 实现大球跟随，但需增强其「感知悬停目标」能力：
// 改进后的 hover 监听（绑定到每个 .letter）
document.querySelectorAll('.letter').forEach(letter => {
letter.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: 4,
x: x - 15, // 30px 圆直径 → 半径15
y: y - 15,
ease: "power2.out"
});
});
letter.addEventListener('mouseleave', () => {
TweenMax.to(bigBall, 0.3, {
scale: 1,
ease: "power2.in"
});
});
});同时，移除 SVG <circle> 的 fill: #f7f8fa（避免干扰混合模式），改为：
.cursor__ball circle {
fill: transparent; /* 仅作定位锚点，不参与渲染 */
}⚠️ 注意事项与优化建议
- 性能提示：逐字拆分后 DOM 节点增多，建议仅对可见区域文字处理（结合 IntersectionObserver 懒加载）；
- 可访问性：保留原始 <h1> 语义，.letter 仅作视觉增强，勿移除文本内容；
- 响应式适配：30px 圆形在高清屏下可能偏小，可用 min(30px, 3vw) 替代；
- 渐变兼容性：确保 -webkit-background-clip: text 和 background-clip: text 同时存在，覆盖 Safari/Chrome；
- 备选方案（更轻量）：若无需精确 30×30px，可用 text-shadow 模拟模糊圆形光晕（但缺乏精准裁剪）。
通过将文字原子化、利用 ::before 伪元素创建独立圆形蒙版、并精准控制 pointer-events 与混合模式，即可在不牺牲渐变表现力的前提下，达成所求的交互式圆形高亮效果——既专业，又具备生产可用性。
