CSS 奇技淫巧 | 妙用夹杂模式实现文字镂空海浪效果

澳洲幸运5开户www.a55555.net)是澳洲幸运5彩票官方网站,开放澳洲幸运5彩票会员开户、澳洲幸运5彩票代理开户、澳洲幸运5彩票线上投注、澳洲幸运5实时开奖等服务的平台。

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

USDT交易所程序出租USDT交易所程序出租),全球頂尖的USDT場外擔保交易平臺程序出租。

实验使用让文字透明

我们要实验让文字透明

  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 订阅珍藏。

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

皇冠登1登2登3www.9cx.net)实时更新发布最新最快最有效的登1登2登3代理网址,包括新2登1登2登3代理手机网址,新2登1登2登3代理备用网址,皇冠登1登2登3代理最新网址,新2登1登2登3代理足球网址,新2网址大全。

  • 评论列表:
  •  皇冠网址大全(www.22223388.com)
     发布于 2021-10-12 00:03:48  回复
  • 新2代理手机管理端(www.huangguan.us)实时更新发布最新最快的新2代理线路、新2会员线路、新2备用登录网址、新2手机管理端、新2手机版登录网址、新2皇冠登录网址。吐血推荐!!
    •  新2代理网址(www.22223388.com)
       发布于 2021-10-14 19:17:10  回复
    • 鲸鱼算力官网(www.ipfs8.vip)是FiLecoin致力服务于使用FiLecoin存储和检索数据的官方权威平台。鲸鱼算力官网实时更新FiLecoin(FIL)行情、当前FiLecoin(FIL)矿池、FiLecoin(FIL)收益数据、各类FiLecoin(FIL)矿机出售信息。并开放FiLecoin(FIL)交易所、IPFS云矿机、IPFS矿机出售、租用、招商等业务。一定持续创作啊

添加回复:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。