使用 CSS 混合模式实现动态反差色效果

date

May 13, 2024 09:25 AM

type

status

slug

summary

前言

在前端开发中，我们经常会遇到需要动态变化的视觉效果。今天我们将讨论如何利用 CSS 的 mix-blend-mode 属性，实现一个文本穿过特定背景时反色的效果。具体来说，我们会创建一个背景为黑色的 div 元素，并让文本从中穿过。当文本进入 div 的区域时，其颜色会从黑色变为白色，离开时则恢复为黑色。

实现原理

mix-blend-mode 是 CSS 的一种混合模式，可以用来指定如何将元素的内容与其背景内容混合在一起。我们使用 difference 模式，这种模式会比较两个元素的颜色值，并对它们进行差值运算：

如果一个通道中的颜色值相同，结果为黑色（0）。

如果一个通道中的颜色值不同，结果为白色（255）。

当文本颜色为黑色（#000）时，进入黑色背景区域，计算结果仍为黑色，看起来没有变化。但当文本颜色为白色（#fff）时，进入黑色背景区域，计算结果为白色，看起来是反色效果。

实现步骤

1. 设置基础结构

首先，我们创建一个简单的 HTML 结构，包括一个容器和一个文本元素：

2. 样式和动画

全局背景：将 body 的背景设置为白色，方便我们观察效果。

容器：.container 是我们的目标区域，设置 mix-blend-mode: difference 使其内容与背景进行差值运算，并用渐变背景模拟黑白区域的转换。

文本：.text 设置初始颜色为白色，并添加动画 moveText 让文本从左到右穿过容器。

3. 渐变背景解释

我们使用了 CSS 的 linear-gradient 属性来创建渐变背景，具体设置如下：

参数解释：

90deg：设置渐变的方向为 90 度，表示从左到右的水平渐变。

white 0 300px：定义渐变的第一部分为白色，从开始（0px）到 300px 的范围内完全是白色。

#000 300px：定义渐变的第二部分为黑色，从 300px 开始一直到容器的右边界都是黑色。

为什么使用这些设置：

这种设置创建了一个从左到右的渐变，其中左侧是白色，右侧是黑色。这种背景设置模拟了文本在穿过不同颜色区域时的效果。通过 mix-blend-mode: difference，当白色文本进入黑色区域时，会产生反色效果，变为黑色；当离开黑色区域进入白色区域时，文本会变回白色。

4. 关键帧动画

使用 @keyframes 定义 moveText 动画，使文本从容器左侧移动到右侧：

5. 组合效果

通过组合上述设置，当白色文本进入黑色背景区域时，其颜色会反色为黑色，离开黑色区域则恢复为白色。

总结

利用 mix-blend-mode 和 CSS 动画，我们实现了一个有趣的反差色效果。这个方法可以应用于多种场景，如文本悬停、滚动效果等，为网站增加动态视觉效果。希望这篇博客对你在前端开发中的视觉效果实现有所帮助。