如何通过HTML/CSS/JS实现文字与元素重叠时显示不同颜色

这个效果实现门槛非常低，不需要编写复杂JavaScript，绝大多数场景下也不需要引入任何第三方依赖库。
核心可以直接用CSS原生的混合模式属性实现，完全匹配你要的「重叠区域文字显示独立颜色、而非单纯半透明叠加」的需求：

• 最简便的实现方式是给文字元素设置mix-blend-mode属性，浏览器会自动实时计算文字和下层所有元素的像素重叠关系，不管动画里文字、背景块怎么移动，重叠区域的颜色都会自动按你设定的混合规则渲染，不需要手动写逻辑判断重叠位置、计算区域范围。
• 如果你要的是重叠区和非重叠区颜色完全自定义、不是默认反色效果，可以配合CSSclip-path或者mask属性，叠两层同位置不同颜色的文字，一层只显示非重叠区域、一层只显示重叠区域即可，动画过程中只需要同步更新裁剪路径的位置，纯CSS就能覆盖绝大多数常规交互动画场景，核心代码不超过20行。
  基础实现代码参考：

  .animated-text {
    position: absolute;
    /* 非重叠区域文字颜色 */
    color: #000;
    mix-blend-mode: difference;
    /* 正常写你的动画逻辑即可，比如位移动画 */
    animation: moveAcross 4s linear infinite alternate;
  }
  

只有当你需要重叠区域显示复杂纹理、或者颜色混合规则完全超出CSS内置的16种混合模式覆盖范围时，才需要补充少量JavaScript获取元素实时位置更新裁剪范围，这种场景也不需要引入重型第三方库，几十行原生JS代码就能搞定，不需要额外依赖。

内容的提问来源于stack exchange，提问作者Thibaut B.