CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果
本文将介绍一个小技巧,通过混合模式 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
的一些基础用法,感兴趣的同学可以自行研究。
更多精彩 CSS 效果可以关注我的 CSS 灵感
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果的更多相关文章
- CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果
本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow(),实现对 HTML 元素及 SVG 元素的部分添加阴影效果,以实现一种酷炫的光影效果,用于各种不同的场景之中.通过本文,你 ...
- CSS实现背景图片透明和文字不透明效果
1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) width: 500px; height: 300px; line-height: 50px; text-align: cente ...
- 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!
大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧
- CSS实现单行与多行文字省略(truncation)
在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...
- css伪类实现文字两侧划线效果
css伪类实现文字两侧划线效果,效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <title> css伪类的学习 & ...
- amazeui学习笔记--css(基本样式3)--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- Js制作点击输入框时默认文字消失的效果
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...
- 纯 CSS 实现波浪效果!
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- CSS3实现文字折纸效果
CSS3实现文字折纸效果 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></tit ...
随机推荐
- Docker中安装了gitlab,忘记了管理员密码,进行管理员密码重置
重置docker中gitlab中root账号的密码 一.进入Docker的gitlab容器中 1.查看所有容器 docker ps 2.进入gitlab容器中 docker exec -it gitl ...
- COM笔记-关于HRESULT
HRESULT HRESULT(Here's the RESULT)值分成32位值, HRESULT值中16到30这15个比特位包含的是设备代码.设备代码标识的是可以返回HRESULT返回代码的操作系 ...
- docker搭建mysql集群
目录 一.集群方案 二.安装PXC集群 三.Haproxy负载均衡 四.访问测试 五.节点宕机或重启 六.参考 一.集群方案 1.Replication 速度快,但仅能保证弱一致性,适用于保存价值不高 ...
- tomcat过滤器异常
Connected to server[2019-11-25 04:40:58,976] Artifact DUBBO_BG:Web exploded: Artifact is being deplo ...
- BUUCTF-[网鼎杯 2020 青龙组]AreUSerialz
BUUCTF-[网鼎杯 2020 青龙组]AreUSerialz 看题 <?php include("flag.php"); highlight_file(__FILE__) ...
- 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 ...
- WebService学习总结(四)--基于CXF的服务端开发
本节将实践目前最流行的第二种web service 发布和调试框架 CXF Apache CXF 是一个开放源代码框架,提供了用于方便地构建和开发 Web 服务的可靠基础架构.它允许创建高性能和可扩 ...
- Spring Boot 入门系列(二十五)读取配置文件的几种方式详解!
在项目开发中经常会用到配置文件,之前介绍过Spring Boot 资源文件属性配置的方法,但是很多朋友反馈说介绍的不够详细全面.所以, 今天完整的分享Spring Boot读取配置文件的几种方式! S ...
- adb 常用命令大全(6)- 模拟按键输入
语法格式 input [<source>] <command> [<arg>...] 物理键 # 电源键 adb shell input keyevent 26 # ...
- Docker(23)- 注册 docker hub 的账号
如果你还想从头学起 Docker,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1870863.html 前言 Docker Hub 是 ...