妙用CSS混合模式實現(xiàn)文字鏤空波浪效果
本文將介紹一個小技巧，通過混合模式 mix-blend-mode 巧妙的實現(xiàn)文字的鏤空效果。
起因
一日，一群友私聊問我。如何使用 CSS 實現(xiàn)下述效果，一個文字的波浪效果：
我當(dāng)時想都沒想，就回答道，這個很簡單啊。
熟練的打開 CodePen，一頓操作，好像事情沒有那么簡單。想要用純 CSS 實現(xiàn)起來非常的棘手。
純 CSS 實現(xiàn)波浪效果
在進入正題前，我們先復(fù)習(xí)下，使用 CSS 實現(xiàn)波浪，如果不是在鏤空的文字內(nèi)，而是在一個 div 容器內(nèi)，可以使用滾動大圓的方式，類似于這樣：
容器應(yīng)用 overflow: hidden，就能得到這樣的效果：
對這個技巧還不理解，可以猛擊這篇文章：純 CSS 實現(xiàn)波浪效果![1]
如何在文字中應(yīng)用此效果
OK，回歸正題，那么如何在文字中應(yīng)用此效果呢?
問題出在哪里呢?
我們首先嘗試下，白底黑字，加上該效果：
- <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);
- }
- }
效果大概是這樣：
當(dāng)然，我們也可以把它放置到文字層下面，更直觀點：
- p {
- ...
- &::before,
- &::after {
- ...
- + z-index: -1;
- }
- }
Oh，太糟糕了，僅僅這樣是沒法實現(xiàn) -- 只是文字被鏤空，文字內(nèi)部才有波浪效果。
嘗試使用讓文字透明
我們要嘗試讓文字透明
- 可以使用 color: transparent 使文字透明
- 嘗試使用 background-clip 實現(xiàn)
emmm，逐一嘗試下。如果字體設(shè)置為透明，由于
設(shè)置了白色底色，字體顏色也就會變成白色。整體就是一幅白，失敗。
那如果背景設(shè)置為黑色，并且設(shè)置 background-clip: text 呢?字體依然是黑色，波浪依舊無法進到鏤空的字體中~
- p {
- + background-clip: text;
- }
也就是這樣：
強大的混合模式
看來此路不通，只能另辟蹊徑。
在 CSS 中，其他能對顏色進行處理的，一是濾鏡 filter，另外一個就是混合模式 mix-blend-mode，在這里，腦袋里快速閃過各個濾鏡，應(yīng)該都不行。但是混合模式，倒是能夠嘗試一下。
在 CSS 中也有混合模式(mix-blend-mode、background-blend-mode)，混合模式最常見于 photoshop 中，是 PS 中十分強大的功能之一，目前在 CSS 中得到了非常好的支持。
我們嘗試給兩個大圓，添加混合模式，在當(dāng)前的配色下，也就是白底黑字的情況下，濾掉白底下的藍色。
Wow，當(dāng)給兩個波浪圓形加上 mix-blend-mode: lighten 時，成功的在白底上過濾掉了藍色，只在黑色字體上能夠看到藍色波浪的效果。
當(dāng)然，另外一個混合模式 mix-blend-mode: screen 也能達到類似的效果：
至此，通過混合模式，我們巧妙的實現(xiàn)了這樣一個文字鏤空的波浪效果。通過混合模式的特性，過濾掉了效果中一些我們不希望看見的顏色，只讓正確的顏色在正確的地方出現(xiàn)。
完整的代碼你可以猛擊：CSS 靈感 - 使用混合模式疊加實現(xiàn)文字波浪效果[2]
最后
好了，本文到此結(jié)束，希望對你有幫助 :)
本文沒有詳細(xì)的去講混合模式 mix-blend-mode 的一些基礎(chǔ)用法，感興趣的同學(xué)可以自行研究。
參考資料
[1]純 CSS 實現(xiàn)波浪效果!:
https://github.com/chokcoco/iCSS/issues/22
[2]CSS 靈感 - 使用混合模式疊加實現(xiàn)文字波浪效果:
https://csscoco.com/inspiration/#/./blendmode/mixblend-text-wave-effect
