使用 CSS 或 SVG 与背景颜色匹配的动画文本颜色？答案

【问题标题】：Animating text color that matches the background color with CSS or SVG?使用 CSS 或 SVG 与背景颜色匹配的动画文本颜色？
【发布时间】：2016-04-06 05:55:22
【问题描述】：

我不确定这里是否是提出此类问题的最佳地点。但我几乎不知道从哪里开始，如果有人能指出我正确的地方，我将不胜感激。

不确定什么是最好的搜索词。

我正在尝试重新创建这样的排版效果。如果您查看“有机”，它会在用户向下滚动页面时更改填充颜色和间距。填充颜色填充到文本的一半。 https://dribbble.com/shots/2623261-Landing-Page-Animation

CSS 可能吗？还是 SVG？如果是，我应该调查哪些领域？

*更新：我找到了这篇文章。 https://css-tricks.com/reverse-text-color-mix-blend-mode/

【问题讨论】：

标签： javascript css svg

【解决方案1】：

使用 CSS 是可能的。检查答案here。效果很简单。

基本上，您添加多个文本。一个是白色的，一个是黑色的在不同的 div 中，你为每个 div 添加剪辑，所以当你滚动时，它看起来就像你想要的效果。

【讨论】：

谢谢！这更简单。