本文将介紹一個小技巧，通過混合模式 <code>mix-blend-mode</code> 巧妙的實作文字的镂空波浪效果。
一日，一群友私聊問我。如何使用 CSS 實作下述效果，一個文字的波浪效果：
我當時想都沒想，就回答道，這個很簡單啊。
熟練的打開 CodePen，一頓操作，卧槽，好像事情沒有那麼簡單。想要用純 CSS 實作起來非常的棘手。
在進入正題前，我們先複習下，使用 CSS 實作波浪，如果不是在镂空的文字内，而是在一個 <code>div</code> 容器内，可以使用滾動大圓的方式，類似于這樣：
容器應用 <code>overflow: hidden</code>，就能得到這樣的效果：
對這個技巧還不了解，可以猛擊這篇文章：純 CSS 實作波浪效果！
OK，回歸正題，那麼如何在文字中應用此效果呢？
問題出在哪裡呢？
我們首先嘗試下，白底黑字，加上該效果：
核心的 CSS 僞代碼如下：
效果大概是這樣：
當然，我們也可以把它放置到文字層下面，更直覺點：
Oh，太糟糕了，僅僅這樣是沒法實作 -- 隻是文字被镂空，文字内部才有波浪效果。
我們要嘗試讓文字透明
可以使用 <code>color: transparent</code> 使文字透明
嘗試使用 <code>background-clip</code> 實作
emmm，逐一嘗試下。如果字型設定為透明，由于 <code><p></code> 設定了白色底色，字型顔色也就會變成白色。整體就是一幅白，失敗。
那如果背景設定為黑色，并且設定 <code>background-clip: text</code> 呢？字型依然是黑色，波浪依舊無法進到镂空的字型中~
也就是這樣：
看來此路不通，隻能另辟蹊徑。
在 CSS 中，其他能對顔色進行處理的，一是濾鏡 <code>filter</code>，另外一個就是混合模式 <code>mix-blend-mode</code>，在這裡，腦袋裡快速閃過各個濾鏡，應該都不行。但是混合模式，倒是能夠嘗試一下。
在 CSS 中也有混合模式（<code>mix-blend-mode</code>、<code>background-blend-mode</code>），混合模式最常見于 photoshop 中，是 PS 中十分強大的功能之一，目前在 CSS 中得到了非常好的支援。
我們嘗試給兩個大圓，添加混合模式，在目前的配色下，也就是白底黑字的情況下，濾掉白底下的藍色。
Wow，當給兩個波浪圓形加上 <code>mix-blend-mode: lighten</code> 時，成功的在白底上過濾掉了藍色，隻在黑色字型上能夠看到藍色波浪的效果。
當然，另外一個混合模式 <code>mix-blend-mode: screen</code> 也能達到類似的效果：
至此，通過混合模式，我們巧妙的實作了這樣一個文字镂空的波浪效果。通過混合模式的特性，過濾掉了效果中一些我們不希望看見的顔色，隻讓正确的顔色在正确的地方出現。
完整的代碼你可以猛擊：CSS 靈感 - 使用混合模式疊加實作文字波浪效果
好了，本文到此結束，希望對你有幫助 😃
本文沒有詳細的去講混合模式 <code>mix-blend-mode</code> 的一些基礎用法，感興趣的同學可以自行研究。
更多精彩 CSS 效果可以關注我的 CSS 靈感
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。