共计 1796 个字符，预计需要花费 5 分钟才能阅读完成。
本文将介绍一个小技巧，通过混合模式 mix-blend-mode 奇妙的实现文字的镂空波浪成果。
起因
一日，一群友私聊问我。如何应用 CSS 实现下述成果，一个文字的波浪成果：
我过后想都没想，就答复道，这个很简略啊。
纯熟的关上 CodePen，一顿操作，卧槽，如同事件没有那么简略。想要用纯 CSS 实现起来十分的辣手。
纯 CSS 实现波浪成果
在进入正题前，咱们先温习下，应用 CSS 实现波浪，如果不是在镂空的文字内，而是在一个 div 容器内，能够应用滚动大圆的形式，相似于这样：
容器利用 overflow: hidden，就能失去这样的成果：
对这个技巧还不了解，能够猛击这篇文章：纯 CSS 实现波浪成果！
如何在文字中利用此成果
OK，回归正题，那么如何在文字中利用此成果呢？
问题出在哪里呢？
咱们首先尝试下，白底黑字，加上该成果：
<div class="g-container">
<p>TEXT WAVE</p>
</div>外围的 CSS 伪代码如下：
p {
background: #fff;
color: #000;
&::before,
&::after {
content: "";
position: absolute;
border-radius: 45% 48% 43% 47%;
background: rgba(3, 169, 244, .85);
animation: rotate 10s infinite linear;
}
&::after {
border-radius: 43% 47% 44% 48%;
animation: rotate 10s infinite .5s linear;
}
}
@keyframes rotate {
0% {transform: translate(-50%, -50%) rotate(0);
}
100% {transform: translate(-50%, -50%) rotate(360deg);
}
}成果大略是这样：
当然，咱们也能够把它搁置到文字层上面，更直观点：
p {
...
&::before,
&::after {
...
+ z-index: -1;
}
}
Oh，太蹩脚了，仅仅这样是没法实现 — 只是文字被镂空，文字外部才有波浪成果。
尝试应用让文字通明
咱们要尝试让文字通明
- 能够应用
color: transparent使文字通明 - 尝试应用
background-clip实现
emmm，逐个尝试下。如果字体设置为通明，因为 <p> 设置了红色底色，字体色彩也就会变成红色。整体就是一幅白，失败。
那如果背景设置为彩色，并且设置 background-clip: text 呢？字体仍然是彩色，波浪仍旧无奈进到镂空的字体中~
p {+ background-clip: text;}也就是这样：
弱小的混合模式
看来此路不通，只能另辟蹊径。
在 CSS 中，其余能对色彩进行解决的，一是滤镜 filter，另外一个就是混合模式 mix-blend-mode，在这里，脑袋里疾速闪过各个滤镜，应该都不行。然而混合模式，倒是可能尝试一下。
在 CSS 中也有混合模式（mix-blend-mode、background-blend-mode），混合模式最常见于 photoshop 中，是 PS 中非常弱小的性能之一，目前在 CSS 中失去了十分好的反对。
咱们尝试给两个大圆，增加混合模式，在以后的配色下，也就是白底黑字的状况下，滤掉白底下的蓝色。
Wow，当给两个波浪圆形加上 mix-blend-mode: lighten 时，胜利的在白底上过滤掉了蓝色，只在彩色字体上可能看到蓝色波浪的成果。
当然，另外一个混合模式 mix-blend-mode: screen 也能达到相似的成果：
至此，通过混合模式，咱们奇妙的实现了这样一个文字镂空的波浪成果。 通过混合模式的个性，过滤掉了成果中一些咱们不心愿看见的色彩，只让正确的色彩在正确的中央呈现。
残缺的代码你能够猛击：CSS 灵感 – 应用混合模式叠加实现文字波浪成果
最初
好了，本文到此结束，心愿对你有帮忙 :)
本文没有具体的去讲混合模式 mix-blend-mode 的一些根底用法，感兴趣的同学能够自行钻研。
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 成果能够关注我的 CSS 灵感
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
