使用CSS混合模式实现文字镂空波浪效果

核心CSS伪代码如下：p{背景：#fff；颜色：#000；&::before,&::after{content:"";position:absolute;border-radius:45%48%43%47%;background:rgba(3,169,244,.85);动画:rotate10sinfinitelinear;}&::after{border-radius:43%47%44%48%;动画:rotate10sinfinite.5slinear;}}@keyframesrotate{0%{transform:translate(-50%,-50%))rotate(0);}100%{transform:translate(-50%,-50%)rotate(360deg);}}效果大概是这样的：当然我们也可以把它放在下面文本层，更直观：p{...&::before,&::after{...+z-index:-1;}}哦，太糟糕了，只是这样是不可能的--Only文字镂空，文字内部有波浪效果。尝试让文字透明我们准备尝试让文字透明可以使用color:transparent来让文字透明尝试使用background-clip实现emmm，一一尝试。如果字体设置为透明，字体颜色也会因为白色底色而变成白色。整体是白图，失败。如果背景设置为黑色并且设置了background-clip:text怎么办？字体还是黑的，波浪还是不能进入镂空字体~p{+background-clip:text;}就是这样：一个强大的混合模式这里没办法，只能另辟蹊径了。在CSS中，还有其他一些东西可以处理颜色，一个是filter滤镜，一个是mix-blend-mode。在这里，在头部闪烁各种过滤器应该不起作用。但是混合模式，你可以试试。CSS中也有混合模式（mix-blend-mode，background-blend-mode）。混合模式在photoshop中最常见，也是PS中最强大的功能之一。它目前在CSS中得到很好的支持。我们尝试在两个大圆圈中加入混合模式，在当前配色方案下，即白底黑字的情况下，过滤掉白底下的蓝色。哇哦，在给两个波浪圆圈加上mix-blend-mode:lighten的时候，蓝色在白色背景上被成功过滤掉了，只有在黑色字体上才能看到蓝色波浪效果。当然另一种混合模式mix-blend-mode:screen也可以实现类似的效果：至此，通过混合模式，我们巧妙的实现了这样一个文字镂空的波浪效果。通过混合模式的特性，在效果中过滤掉一些我们不想看到的颜色，只有正确的颜色出现在正确的地方。完整代码可以扫一扫：CSSInspiration——使用混合模式叠加实现文字波浪效果[2]最后，本文到此结束，希望对你有所帮助：）本文不谈混合模式在detailmix-blend-mode的一些基本用法，有兴趣的同学可以自行研究。参考资料[1]纯CSS实现波浪效果！：https://github.com/chokcoco/iCSS/issues/22[2]CSS灵感——使用混合模式叠加实现文字波浪效果：https://csscoco.com/灵感/#/./blendmode/mixblend-text-wave-effect