本文介绍一种高效、兼容性强的 CSS+JS 方案，利用双层重叠文本与 clip 属性（或宽度裁剪），实现在鼠标滑过时动态“揭示”白色文字、同时隐藏原始文字的视觉效果，避免逐字符颜色计算带来的复杂性与性能问题。
本文介绍一种高效、兼容性强的 css+js 方案，利用双层重叠文本与 `clip` 属性（或宽度裁剪），实现在鼠标滑过时动态“揭示”白色文字、同时隐藏原始文字的视觉效果，避免逐字符颜色计算带来的复杂性与性能问题。
在前端交互设计中，实现“鼠标移动到区域时，文字从左至右逐步变为高亮色（如白色）”的需求，常被误认为必须对每个字符单独定位并着色。但这种方式不仅逻辑复杂（需精确测量字体宽度、处理换行、响应式适配），还容易因 getBoundingClientRect() 频繁调用和 DOM 操作引发性能抖动。
更优雅且高性能的解法是：采用双层文本叠加 + 视觉裁剪。即在同一位置渲染两份完全相同的
文本——底层为默认色（如黑色/深色），上层为白色；再通过 CSS clip（或绝对定位+overflow: hidden）动态控制上层的可见区域宽度，随鼠标 X 坐标实时更新，从而营造出“文字被鼠标‘擦出’白色”的流畅动画效果。✅ 推荐方案：使用 clip: rect() 实现精准裁剪
clip 属性（配合 rect() 函数）可精确限定元素的可见矩形区域，且仅影响渲染，不改变布局，非常适合此类遮罩场景。以下是完整实现：
<div id="box-wrapper">
<div class="box" id="box-base">
<h1>The power of Gods</h1>
</div>
<div class="box" id="box-reveal">
<h1>The power of Gods</h1>
</div>
</div>
#box-wrapper {
position: relative;
width: 100vw;
height: 100vh;
}
.box {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #F84F39;
overflow: hidden;
white-space: nowrap;
}
#box-base > h1 {
font-family: 'Verdana', 'Geneva', 'Tahoma', sans-serif;
font-weight: bold;
color: #000;
z-index: 1;
}
#box-reveal {
background-color: #1B1A27;
clip: rect(0, 0, 100vh, 0); /* 初始完全隐藏 */
}
#box-reveal > h1 {
color: #FFF;
z-index: 2;
}
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, rect.width] 范围内
const clipWidth = Math.max(0, Math.min(xPosition, rect.width));
revealBox.style.clip = `rect(0, ${clipWidth}px, ${rect.height}px, 0)`;
});
⚠️ 注意事项：
- clip 属性在现代浏览器中已被弃用（推荐改用 clip-path），但 clip: rect() 在绝大多数场景下仍稳定支持；若需长期维护，建议升级为 clip-path: inset(0 calc(100% - Xpx) 0 0)；
- 为保证居中效果不受裁剪影响，务必使用 flex 布局 + absolute 定位，而非依赖 text-align: center 或 margin: auto；
- 若文本可能换行，请移除 white-space: nowrap 并改用 clip-path: inset() 配合 inline-size 计算，或改用 SVG 文本掩码方案。
✅ 备选方案：纯 CSS clip-path（推荐用于新项目）
#box-reveal {
background-color: #1B1A27;
clip-path: inset(0 calc(100% - 0px) 0 0); /* 初始：右侧全部裁掉 */
}
// JS 中更新为：
revealBox.style.clipPath = `inset(0 calc(100% - ${clipWidth}px) 0 0)`;
该方式语义更清晰、支持动画过渡（添加 transition: clip-path 0.1s ease-out），且无弃用风险。
总结
相比原始代码中基于像素距离逐字插值 RGB 的方法，双层裁剪方案具备三大优势：
? 高性能：仅修改单个 CSS 属性，触发合成层绘制，避免重排重绘；
? 高可靠性：不依赖字体度量、无小数精度误差、天然支持任意字体与字号；
? 易维护：HTML/CSS/JS 职责分离，逻辑直观，便于后续扩展（如添加过渡动画、响应式适配或触控支持）。
掌握这一模式，你将能快速复用它实现「文字扫光」「进度揭示」「悬停高亮」等数十种交互动效。
