CSS奇技淫巧妙⽤混合模式实现⽂字镂空波浪效果本⽂将介绍⼀个⼩技巧，通过混合模式 mix-blend-mode 巧妙的实现⽂字的镂空波浪效果。
起因
⼀⽇，⼀友私聊问我。如何使⽤ CSS 实现下述效果，⼀个⽂字的波浪效果：
我当时想都没想，就回答道，这个很简单啊。
熟练的打开 CodePen，⼀顿操作，卧槽，好像事情没有那么简单。想要⽤纯 CSS 实现起来⾮常的棘⼿。
纯 CSS 实现波浪效果
在进⼊正题前，我们先复习下，使⽤ CSS 实现波浪，如果不是在镂空的⽂字内，⽽是在⼀个 div 容器内，可以使⽤滚动⼤圆的⽅式，类似于这样：
容器应⽤ overflow: hidden，就能得到这样的效果：
对这个技巧还不理解，可以猛击这篇⽂章：
如何在⽂字中应⽤此效果
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%;css特效文字
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 也能达到类似的效果：
⾄此，通过混合模式，我们巧妙的实现了这样⼀个⽂字镂空的波浪效果。通过混合模式的特性，过滤掉了效果中⼀些我们不希望看见的颜⾊，只让正确的颜⾊在正确的地⽅出现。完整的代码你可以猛击：
最后
好了，本⽂到此结束，希望对你有帮助
本⽂没有详细的去讲混合模式 mix-blend-mode 的⼀些基础⽤法，感兴趣的同学可以⾃⾏研究。
更多精彩 CSS 效果可以关注我的
更多精彩 CSS 技术⽂章汇总在我的 ，持续更新，欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议，可以多多交流，原创⽂章，⽂笔有限，才疏学浅，⽂中若有不正之处，万望告知。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。