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

IT科技类资讯2025-11-05 07:12:07691

本文将介绍一个小技巧,妙用通过混合模式 mix-blend-mode 巧妙的混合模实现文字的镂空效果。

起因

一日,式实一群友私聊问我。现文如何使用 CSS 实现下述效果,字镂一个文字的空波波浪效果:

我当时想都没想,就回答道,浪效这个很简单啊。妙用

熟练的混合模打开 CodePen,一顿操作,式实好像事情没有那么简单。现文想要用纯 CSS 实现起来非常的字镂棘手。

纯 CSS 实现波浪效果

在进入正题前,空波我们先复习下,浪效使用 CSS 实现波浪,妙用如果不是在镂空的文字内,而是在一个 div 容器内,可以使用滚动大圆的方式,类似于这样:

容器应用 overflow: hidden,就能得到这样的效果:

对这个技巧还不理解,可以猛击这篇文章:纯 CSS 实现波浪效果![1]

如何在文字中应用此效果

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,逐一尝试下。如果字体设置为透明,由于

设置了白色底色,字体颜色也就会变成白色。整体就是一幅白,失败。

那如果背景设置为黑色,并且设置 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 灵感 - 使用混合模式叠加实现文字波浪效果[2]

最后

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

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

参考资料

[1]纯 CSS 实现波浪效果!:

https://github.com/chokcoco/iCSS/issues/22

[2]CSS 灵感 - 使用混合模式叠加实现文字波浪效果:

https://csscoco.com/inspiration/#/./blendmode/mixblend-text-wave-effect

本文地址:http://www.bzve.cn/news/545f65598799.html
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

热门文章

全站热门

opoor11plus的优势与使用经验分享(一款高性价比的智能手机,为您带来卓越的使用体验)

Opera 9.5 正式版已经发布:   Opera 9.5 已经解决了中文输入问题和字体选取混乱的问题。我们有新的字体替换机制用于 Opera 9.5 Beta 2 之后的版本   1. Flash Player 9 的插件取消了原来对非 gtk 程序调用的借口,导致非 GTK 浏览器无法调用 Flash 插件。受到影响的浏览器有 Opera 9.2x 和 Konqueror 。   2. 解决方法:使用 Opera 9.5 。   我们注意到这个问题对用户体验产生了重大影响,已经在 Opera 9.5 解决。我们专门写了一个调用该类插件的 wrapper 程序,即使在 64 位 Opera 上,调用 Flash 插件也没有问题。   Flash Player 10 下载地址:   http://download.macromedia.com/....../flashplayer10_install_linux_051508.tar.gz  下载后将 libflash*.so 复制到/usr/lib/browser-plugins 目录下,重启 Opera 9.5 即可自动调用。

打开终端输入复制代码代码如下:pointer = 1 2 3 4 5 6 7 8 9 10 11 12保存注销即可

1 下载源码从网站https://sites.google.com/site/linuxvtl2/home#mhvtl-download下载最新版的mhvtl,我下的是最新的mhvtl-2013-10-20.tgz版本。2 确保内核版本的一致性确保你的内核开发包和你系统正在运行的内核是一个版本的,因为mhvtl有会编译它编写的一个内核模块,假如内核开发包和你系统正在运行的内核不是一个版本的话,在安装mhvtl中的内核模块的时候是加载不到内核中的,虽然可以通过源码中的include/linux/vermagic.h中的VERMAGIC_STRING修改成与当前PC内核uname -r一致即可,不过不推荐使用。3 解压缩源代码tar xvfz mhvtl-2013-10-20.tgz4 安装四个包lsscsi,sg3_utils,liblzo2-dev,mtx直接用apt-get install命令安装就可以了apt-get lsscsi sg3_utils liblzo2-dev mtx没有装liblzo2-dev包在编译mhvtl时会提示找不到文件 lzo/lzoconf.h5 创建mhvtl的组和用户/usr/sbin/groupadd --system vtl/usr/sbin/useradd --system -c Vitrual Tape Library -d /opt/vtl -g vtl -m vtl6 编译内核模块cd  mhvtl-2013-10-20/kernelmakemake install7 编译用户空间代码cd  mhvtl-2013-10-20makemake install8 修改/opt/mhvtl和/etc/mhvtl目录拥有者,不修改启动不了mhvtlchown -R vtl:vtl /opt/mhvtlchown -R vtl:vtl /etc/mhvtl/etc/mhvtl为配置文件路径,/opt/mhvtl为虚拟带库存储路径9 启动mhvtl的守护进程/etc/init.d/mhvtl start10 查看虚拟带库状态信息lsscsi -g可以看到我们的虚拟设备被挂在HBA#6上,其中mediumx类型的设备为机械臂,本例中的/dev/sg13,/dev/sg14。运行命令mtx -f /dev/sg13 status

解决戴尔电脑登录界面错误的方法(排查戴尔电脑登录界面错误的常见问题及解决方案)

Ubuntu Trusty带来的是3.13.0 Linux kernel ,需要准备所有ubuntu库的某些条件,docker安装包被称之为docker.io。(注:Ubuntu (和Debian)包含有一些比较旧的同样被称之为docker的KDE3/GNOME2安装包,因此此处的docker安装包被称之为docker.io。)安装:安装ubuntu下的安装包(可能不是最新的)$ sudo apt-get update $ sudo apt-get install docker.io $ sudo ln -sf /usr/bin/docker.io /usr/local/bin/docker $ sudo sed -i $acomplete -F _docker docker /etc/bash_completion.d/docker.io $ source /etc/bash_completion.d/docker.io假如你想尝试一下最新版打docker首先,你要检查一下APT系统能够被https解析,URLs:文件/usr/lib/apt/methods/https应该已经存在了,假如没有,你需要安装软件包apt-transport-https![ -e /usr/lib/apt/methods/https ] || { apt-get update apt-get install apt-transport-https }之后,添加Docker repository key到本地keychain$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 36A1D7869245C8950F966E92D8576A8BA88D21E9添加docker软件仓库到软件源,升级软件源,安装lxc-docker包!$ sudo sh -c echo deb https://get.docker.com/ubuntu docker main >/etc/apt/sources.list.d/docker.list $ sudo apt-get update $ sudo apt-get install lxc-docker注:有个简单脚本可以用于这个过程$ curl -sSL https://get.docker.com/ubuntu/ | sudo sh验证所有的工作都如预期完成了$ sudo docker run -i -t ubuntu /bin/bashOK,完毕!谢谢阅读,希望能帮到大家,请继续关注脚本之家,我们会努力分享更多优秀的文章。

创建的热点手机也是可以连接的,这里将分享两个方法一,kde-nm-connection-editor工具开启热点在ubuntu软件中心搜索kde nm connection注意搜索的关键词,不要出现横杠“-”,结果中出现kde-nm-connection-editor安装即可配置终端输入kde-nm-connection-editor跳出连接编辑器的图形界面在图形界面点击 添加-->Wireless(shared)弹出New Connection (New 802-11-wireless connection)图形界面Connection name:更改为mywifi(默认为New 802-11-wireless connection)SSID:更改为mywifi(默认为my_shared_connection)模式:选择Access PointRestrict to device:选择你的无线网卡点击无线安全选项卡安全:选择WPA & WPA2 Personal密码:填入你要设置的密码(至少8位)(这里就不上图了,相信大家看着提示可以设置成功!)连接刚才wifi,只有这样才能建立热点我们点击最上方网络管理的图标,选择 连接到隐藏的Wi-Fi网络Wifi适配器:选择我们设置了的无线网络连接:选择我们刚刚建立的连接名称(mywifi)之后网络名称(SSID),Wi-Fi安全性,密码会自动填写并变成灰色点击确定(这一步可能会出现解锁钥匙环的提示,输入你的电脑登陆密码就能解锁了)现在wifi热点就建立好了,试试你的手机能不能连上吧二,修改配置文件点右上角图标NetworkManager-->编辑连接在弹出的网络连接窗口中点添加在弹出的选择连接类型窗口中选择Wi-Fi,点击新建连接名称:填wifitestconfSSID:填wifitestconf模式:选择架构(注意不要选Ad-hoc)设备MAC地址:选择你要建立AP的网卡切换到Wi-Fi安全性选项卡安全:选WPA及WAP2个人密码:自己设置切换到IPv4设置选项卡方法:选与其它计算机共享点击保存更改配置文件然后我们来到刚才这个连接对应的配置文件终端执行命令ls -l /etc/NetworkManager/system-connections/-rw------- 1 root root 314  9月 19 15:34 360ap -rw------- 1 root root 215  9月 18 09:40 i-LiaoNing -rw------- 1 root root 316  9月 19 18:05 mywifi-rw-r--r-- 1 root root 318  9月 19 19:33 mywifi2-rw------- 1 root root 295  9月 19 19:46 Wi-Fitest -rw------- 1 root root 307  9月 19 19:45 Wi-Fitest~ -rw------- 1 root root 313  9月 19 20:07 wifitestconf-rw------- 1 root root 365  9月 19 19:39 Wi-Fi 连接 1-rw------- 1 root root 337  9月 19 19:37 Wi-Fi 连接 1~-rw------- 1 root root 252  9月 19 19:28 自动以太网可以看到第7个就是我们刚才的配置文件,我们打开它命令输入 sudo gedit /etc/NetworkManager/system-connections/wifitestconf在[802-11-wireless]下面找到mode=infrastructure把它改为mode=ap这里有两个需要注意的问题(1)假如保存之后在退出时仍然提示在关闭前将更改保存到文档“XXX”吗?说明此时文件已经被锁定:强制保存会导致关联的配置文件丢失解决方法如下:断开这个网卡的连接,继续保存。另一个解决方法,前面的编辑连接界面不关闭,完成后续更改,但是大多数人都会关闭的吧。假如保存之后从网络连接界面和连接隐藏的Wi-Fi网络的界面找不到这个连接的名字,说明关联的配置文件丢失解决方法。:编辑配置文件的时候请务必确保网络连接界面是打开的3.连接刚才wifi,只有这样才能建立热点我们点击最上方网络管理的图标,选择 连接到隐藏的Wi-Fi网络Wifi适配器:选择我们设置了的无线网络连接:选择我们刚刚建立的连接名称(wifitestconf)之后网络名称(SSID),Wi-Fi安全性,密码会自动填写并变成灰色点击确定,试试你的手机能不能连上吧。

Sublime Text 2是我用过的感觉最好的代码编辑器,UI和插件管理都很棒,而且现在处于无限期可以免费试用中,Ubuntu也是我最喜欢的Linux操作系统。因为Sublime Text并不是需要安装,所以缺少Ubuntu桌面运行的一些基本配置,比如不能将它加入桌面侧边的启动器。而Ubuntu上也没有快捷方式的说法,而通过软件中心安装的软件就有图标,并能加入到启动器上,这是因为它们有一个desktop配置文件的缘故。这些配置文件在/usr/share/applications这个文件夹下面,既然这样,随便打开一个配置文件,然后依葫芦画瓢,写了个Sublime Text的desktop文件:复制代码代码如下:•Name:就是名称了•Comment:相当于注释•Exec:可执行文件的路径•Icon:图标路径,Sublime Text默认是带了各种型号的图标的其他几个设置主要就是类别等,假如你将这个配置文件放到/usr/share/applications文件夹下,你就可以通过Ubuntu的软件管理在相应的类别下找到软件了。把上面文件保存,比如sublime-text.desktop,并给与可执行权限,然后双击就可以打开Sublime Text了,同时启动器上的图标也可以固定了。

热门文章

友情链接

滇ICP备2023006006号-39