本文介绍一种高效、兼容性好且视觉流畅的方案：通过双层重叠文本 + clip: rect() 动态裁剪，实现鼠标移动时文字从左至右逐字“变白”的高亮效果，规避了逐像素计算颜色的复杂逻辑与渲染性能问题。
本文介绍一种高效、兼容性好且视觉流畅的方案：通过双层重叠文本 + `clip: rect()` 动态裁剪，实现鼠标移动时文字从左至右逐字“变白”的高亮效果，规避了逐像素计算颜色的复杂逻辑与渲染性能问题。
在前端交互设计中，常需实现“鼠标划过区域，文字按进入顺序动态变色”的效果（如题中要求：x 位置左侧文字为白色，右侧保持原色）。原始方案尝试通过 JavaScript 计算鼠标相对 <h1> 的水平比例，并动态生成 RGB 渐变色——虽逻辑可行，但存在明显缺陷：
- 字母非等宽字体下，“按像素位置切分颜色”无法精准对应字符边界；
- 频繁读取 getBoundingClientRect() 和 DOM 样式操作易引发重排重绘，影响性能；
- Flex 居中与动态宽度修改冲突，导致定位漂移。
更优解是利用 CSS 层叠与裁剪能力，将逻辑交由渲染引擎处理。核心思路如下：
✅ 推荐方案：双层文本 + clip: rect()
创建两个完全重叠的 <h1> 元素：
- 底层：默认样式（深色背景 + 黑色文字）；
- 上层：相同内容，但文字设为白色，背景为深色遮罩层，并通过 clip: rect(top, right, bottom, left) 动态裁剪其可见区域。
当鼠标移动时，仅更新上层容器的 clip 值，使白色文字从左向右逐步显现，形成“扫过即亮”的视觉效果。
立即学习“前端免费学习笔记（深入）”；
✅ 完整实现代码
HTML 结构
<div id="box-wrapper">
<div class="box">
<h1>The power of Gods</h1>
</div>
<div class="box" id="box-reveal">
<h1>The power of Gods</h1>
</div>
</div>CSS 样式
#box-wrapper {
position: relative;
width: 100%;
height: 100vh;
}
.box {
display: flex;
align-items: center;
justify-content: center;
background-color: #F84F39;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
overflow: hidden;
white-space: nowrap; /* 防止换行破坏裁剪效果 */
}
.box > h1 {
font-family: 'Verdana', 'Geneva', 'Tahoma', sans-serif;
font-weight: bold;
margin: 0;
color: #000;
z-index: 1;
}
#box-reveal {
background-color: #1B1A27;
}
#box-reveal > h1 {
color: #FFF;
}JavaScript 逻辑
const wrapper = document.getElementById('box-wrapper');
const revealBox = document.getElementById('box-reveal');
wrapper.addEventListener('mousemove', (e) => {
const rect = revealBox.getBoundingClientRect();
const xPosition = e.clientX - rect.left;
// 裁剪区域：从顶部开始，右侧边界随鼠标移动，底部设为视口高度，左侧固定为 0
revealBox.style.clip = `rect(0, ${xPosition}px, ${rect.height}px, 0)`;
});
// 可选：防止鼠标移出容器时裁剪失效
wrapper.addEventListener('mouseleave', () => {
revealBox.style.clip = 'rect(0, 0, 0, 0)';
});⚠️ 注意事项与优化建议
- clip 兼容性说明：clip: rect() 在现代浏览器中广泛支持（包括 IE9+），但已属废弃语法；若需长期维护，可改用 clip-path: inset()（如 clip-path: inset(0 0 0 ${100 - xPercent}%)），但需注意 Safari 对动态 clip-path 的硬件加速支持更佳。
- 性能关键：本方案仅修改单个 CSS 属性（clip 或 clip-path），不触发布局计算，FPS 稳定，适合高频 mousemove 场景。
- 字体适配：因依赖物理像素裁剪，对非等宽字体（如 Verdana）依然精准；若需严格按字符数控制，可结合 getComputedTextLength()（SVG）或 Canvas 测量，但会显著增加复杂度，通常非必要。
- 响应式增强：若容器尺寸动态变化，建议在 resize 事件中重置 clip，或改用基于百分比的 clip-path 避免重复计算。
该方法以声明式思维替代命令式计算，既提升了代码可维护性，又保障了交互动画的丝滑体验，是现代 Web 交互开发中的典型“用 CSS 做事，用 JS 控制”的实践范例。
