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

chokcoco發表於2021-09-27

本文將介紹一個小技巧,通過混合模式 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-modebackground-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 訂閱收藏。

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

相關文章