CSS 奇技淫巧 | 妙用混合模式實現文字鏤空波浪效果

chokcoco發表於2021-09-27
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，太糟糕了，僅僅這樣是沒法實現 -- 只是文字被鏤空，文字內部才有波浪效果。

嘗試使用讓文字透明

我們要嘗試讓文字透明

  1. 可以使用 color: transparent 使文字透明
  2. 嘗試使用 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 的一些基礎用法，感興趣的同學可以自行研究。

想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的公眾號 -- iCSS前端趣聞 ?

更多精彩 CSS 效果可以關注我的 CSS 靈感

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

相關文章