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

前言

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

实现原理

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

  • 如果一个通道中的颜色值相同,结果为黑色(0)。
  • 如果一个通道中的颜色值不同,结果为白色(255)。

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

https://codepen.io/Stonewalling/pen/QWXBwJL

实现步骤

1. 设置基础结构

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mix-Blend-Mode: Difference Demo</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background: #fff; /* 全局背景颜色 */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 300px;
height: 200px;
/* 混合模式 */
position: relative;
mix-blend-mode: difference;
background: linear-gradient(90deg, white 0 300px, #000 300px);
}

.text {
font-size: 48px;
font-weight: bold;
color: #fff; /* 初始文本颜色 */
position: absolute;
white-space: nowrap;
animation: moveText 5s linear infinite;
mix-blend-mode: difference;
z-index: 2;
}

@keyframes moveText {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
</style>
</head>
<body>
<div class="container">
<div class="text">反差色效果</div>
</div>
</body>
</html>

2. 样式和动画

  • 全局背景​:将 body 的背景设置为白色,方便我们观察效果。
  • 容器​:.container 是我们的目标区域,设置 mix-blend-mode: difference 使其内容与背景进行差值运算,并用渐变背景模拟黑白区域的转换。
  • 文本​:.text 设置初始颜色为白色,并添加动画 moveText 让文本从左到右穿过容器。

3. 渐变背景解释

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

1
2
css复制代码
background: linear-gradient(90deg, white 0 300px, #000 300px);

参数解释:

  • 90deg:设置渐变的方向为 90 度,表示从左到右的水平渐变。
  • white 0 300px:定义渐变的第一部分为白色,从开始(0px)到 300px 的范围内完全是白色。
  • #000 300px:定义渐变的第二部分为黑色,从 300px 开始一直到容器的右边界都是黑色。

为什么使用这些设置:

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

4. 关键帧动画

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

1
2
3
4
5
6
7
8
css复制代码 @keyframes moveText {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

5. 组合效果

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

总结

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