本文将介绍一个小技巧,通过混合模式 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,太糟糕了,仅仅这样是没法实现 -- 只是文字被镂空,文字内部才有波浪效果。

尝试使用让文字透明

我们要尝试让文字透明

  1. 可以使用 color: transparent 使文字透明
  2. 尝试使用 background-clip 实现

emmm,逐一尝试下。如果字体设置为透明,由于 <p> 设置了白色底色,字体颜色也就会变成白色。整体就是一幅白,失败。

那如果背景设置为黑色,并且设置 background-clip: text 呢?字体依然是黑色,波浪依旧无法进到镂空的字体中~

p {
+ background-clip: text;
}

也就是这样:

强大的混合模式

看来此路不通,只能另辟蹊径。

在 CSS 中,其他能对颜色进行处理的,一是滤镜 filter,另外一个就是混合模式 mix-blend-mode,在这里,脑袋里快速闪过各个滤镜,应该都不行。但是混合模式,倒是能够尝试一下。

在 CSS 中也有混合模式(mix-blend-modebackground-blend-mode),混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一,目前在 CSS 中得到了非常好的支持。

我们尝试给两个大圆,添加混合模式,在当前的配色下,也就是白底黑字的情况下,滤掉白底下的蓝色。

Wow,当给两个波浪圆形加上 mix-blend-mode: lighten 时,成功的在白底上过滤掉了蓝色,只在黑色字体上能够看到蓝色波浪的效果。

当然,另外一个混合模式 mix-blend-mode: screen 也能达到类似的效果:

至此,通过混合模式,我们巧妙的实现了这样一个文字镂空的波浪效果。通过混合模式的特性,​过滤掉了效果中一些我们不希望看见的颜色,只让正确的颜色在正确的地方出现。

完整的代码你可以猛击:CSS 灵感 - 使用混合模式叠加实现文字波浪效果

最后

好了,本文到此结束,希望对你有帮助

本文没有详细的去讲混合模式 mix-blend-mode 的一些基础用法,感兴趣的同学可以自行研究。

更多精彩 CSS 效果可以关注我的 CSS 灵感

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果的更多相关文章

  1. CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果

    本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中.通过本文,你 ...

  2. CSS实现背景图片透明和文字不透明效果

    1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) width: 500px; height: 300px; line-height: 50px; text-align: cente ...

  3. 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!

    大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧

  4. CSS实现单行与多行文字省略(truncation)

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  5. css伪类实现文字两侧划线效果

    css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...

  6. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  7. Js制作点击输入框时默认文字消失的效果

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...

  8. 纯 CSS 实现波浪效果!

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  9. CSS3实现文字折纸效果

    CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...

随机推荐

  1. Docker中安装了gitlab,忘记了管理员密码,进行管理员密码重置

    重置docker中gitlab中root账号的密码 一.进入Docker的gitlab容器中 1.查看所有容器 docker ps 2.进入gitlab容器中 docker exec -it gitl ...

  2. COM笔记-关于HRESULT

    HRESULT HRESULT(Here's the RESULT)值分成32位值, HRESULT值中16到30这15个比特位包含的是设备代码.设备代码标识的是可以返回HRESULT返回代码的操作系 ...

  3. docker搭建mysql集群

    目录 一.集群方案 二.安装PXC集群 三.Haproxy负载均衡 四.访问测试 五.节点宕机或重启 六.参考 一.集群方案 1.Replication 速度快,但仅能保证弱一致性,适用于保存价值不高 ...

  4. tomcat过滤器异常

    Connected to server[2019-11-25 04:40:58,976] Artifact DUBBO_BG:Web exploded: Artifact is being deplo ...

  5. BUUCTF-[网鼎杯 2020 青龙组]AreUSerialz

    BUUCTF-[网鼎杯 2020 青龙组]AreUSerialz 看题 <?php include("flag.php"); highlight_file(__FILE__) ...

  6. RHCS集群架构之mysql及共享存储iscsi

    server1 172.25.7.1(配置Nginx.ricci和luci) server2 172.25.7.2(Apache.iscsi) server3 172.25.7.3(Apache) s ...

  7. WebService学习总结(四)--基于CXF的服务端开发

    本节将实践目前最流行的第二种web service 发布和调试框架  CXF Apache CXF 是一个开放源代码框架,提供了用于方便地构建和开发 Web 服务的可靠基础架构.它允许创建高性能和可扩 ...

  8. Spring Boot 入门系列(二十五)读取配置文件的几种方式详解!

    在项目开发中经常会用到配置文件,之前介绍过Spring Boot 资源文件属性配置的方法,但是很多朋友反馈说介绍的不够详细全面.所以, 今天完整的分享Spring Boot读取配置文件的几种方式! S ...

  9. adb 常用命令大全(6)- 模拟按键输入

    语法格式 input [<source>] <command> [<arg>...] 物理键 # 电源键 adb shell input keyevent 26 # ...

  10. Docker(23)- 注册 docker hub 的账号

    如果你还想从头学起 Docker,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1870863.html 前言 Docker Hub 是 ...