日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
妙用CSS混合模式實(shí)現(xiàn)文字鏤空波浪效果

本文將介紹一個(gè)小技巧，通過(guò)混合模式 mix-blend-mode 巧妙的實(shí)現(xiàn)文字的鏤空效果。

起因

一日，一群友私聊問(wèn)我。如何使用 CSS 實(shí)現(xiàn)下述效果，一個(gè)文字的波浪效果：

我當(dāng)時(shí)想都沒(méi)想，就回答道，這個(gè)很簡(jiǎn)單啊。

熟練的打開(kāi) CodePen，一頓操作，好像事情沒(méi)有那么簡(jiǎn)單。想要用純 CSS 實(shí)現(xiàn)起來(lái)非常的棘手。

純 CSS 實(shí)現(xiàn)波浪效果

在進(jìn)入正題前，我們先復(fù)習(xí)下，使用 CSS 實(shí)現(xiàn)波浪，如果不是在鏤空的文字內(nèi)，而是在一個(gè) div 容器內(nèi)，可以使用滾動(dòng)大圓的方式，類(lèi)似于這樣：

容器應(yīng)用 overflow: hidden，就能得到這樣的效果：

對(duì)這個(gè)技巧還不理解，可以猛擊這篇文章：純 CSS 實(shí)現(xiàn)波浪效果![1]

如何在文字中應(yīng)用此效果

OK，回歸正題，那么如何在文字中應(yīng)用此效果呢?

問(wèn)題出在哪里呢?

我們首先嘗試下，白底黑字，加上該效果：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.     
    TEXT WAVE
    3.

 核心的 CSS 偽代碼如下：

 
 
 
 
    
  
  
  
  
  1. p {
    2. 
  
  
  
  
  2.     background: #fff;
    3. 
  
  
  
  
  3.     color: #000;
    4. 
  
  
  
  
  4.     
    5. 
  
  
  
  
  5.     &::before,
    6. 
  
  
  
  
  6.     &::after {
    7. 
  
  
  
  
  7.         content: "";
    8. 
  
  
  
  
  8.         position: absolute;
    9. 
  
  
  
  
  9.         border-radius: 45% 48% 43% 47%;
    10. 
  
  
  
  
  10.         background: rgba(3, 169, 244, .85);
    11. 
  
  
  
  
  11.         animation: rotate 10s infinite linear;
    12. 
  
  
  
  
  12.     }
    13. 
  
  
  
  
  13.     
    14. 
  
  
  
  
  14.     &::after {
    15. 
  
  
  
  
  15.         border-radius: 43% 47% 44% 48%;
    16. 
  
  
  
  
  16.         animation: rotate 10s infinite .5s linear;
    17. 
  
  
  
  
  17.     }
    18. 
  
  
  
  
  18. }
    19. 
  
  
  
  
  19. 
  
  
  
  
  20. @keyframes rotate {
    21. 
  
  
  
  
  21.     0% {
    22. 
  
  
  
  
  22.         transform: translate(-50%, -50%) rotate(0);
    23. 
  
  
  
  
  23.     }
    24. 
  
  
  
  
  24.     100% {
    25. 
  
  
  
  
  25.         transform: translate(-50%, -50%) rotate(360deg);
    26. 
  
  
  
  
  26.     }
    27. 
  
  
  
  
  27. }
    28.

效果大概是這樣：

當(dāng)然，我們也可以把它放置到文字層下面，更直觀點(diǎn)：

 
 
 
 
    
  
  
  
  
  1. p {
    2. 
  
  
  
  
  2.     ...
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.     &::before,
    5. 
  
  
  
  
  5.     &::after {
    6. 
  
  
  
  
  6.         ...
    7. 
  
  
  
  
  7.       + z-index: -1;  
    8. 
  
  
  
  
  8.     }
    9. 
  
  
  
  
  9. }
    10.

Oh，太糟糕了，僅僅這樣是沒(méi)法實(shí)現(xiàn) -- 只是文字被鏤空，文字內(nèi)部才有波浪效果。

嘗試使用讓文字透明

我們要嘗試讓文字透明

  1. 可以使用 color: transparent 使文字透明
  2. 嘗試使用 background-clip 實(shí)現(xiàn)

emmm，逐一嘗試下。如果字體設(shè)置為透明，由于

設(shè)置了白色底色，字體顏色也就會(huì)變成白色。整體就是一幅白，失敗。

那如果背景設(shè)置為黑色，并且設(shè)置 background-clip: text 呢?字體依然是黑色，波浪依舊無(wú)法進(jìn)到鏤空的字體中~

 
 
 
 
    
  
  
  
  
  1. p {
    2. 
  
  
  
  
  2.   + background-clip: text;
    3. 
  
  
  
  
  3. }
    4.

也就是這樣：

強(qiáng)大的混合模式

看來(lái)此路不通，只能另辟蹊徑。

在 CSS 中，其他能對(duì)顏色進(jìn)行處理的，一是濾鏡 filter，另外一個(gè)就是混合模式 mix-blend-mode，在這里，腦袋里快速閃過(guò)各個(gè)濾鏡，應(yīng)該都不行。但是混合模式，倒是能夠嘗試一下。

在 CSS 中也有混合模式(mix-blend-mode、background-blend-mode)，混合模式最常見(jiàn)于 photoshop 中，是 PS 中十分強(qiáng)大的功能之一，目前在 CSS 中得到了非常好的支持。

我們嘗試給兩個(gè)大圓，添加混合模式，在當(dāng)前的配色下，也就是白底黑字的情況下，濾掉白底下的藍(lán)色。

Wow，當(dāng)給兩個(gè)波浪圓形加上 mix-blend-mode: lighten 時(shí)，成功的在白底上過(guò)濾掉了藍(lán)色，只在黑色字體上能夠看到藍(lán)色波浪的效果。

當(dāng)然，另外一個(gè)混合模式 mix-blend-mode: screen 也能達(dá)到類(lèi)似的效果：

至此，通過(guò)混合模式，我們巧妙的實(shí)現(xiàn)了這樣一個(gè)文字鏤空的波浪效果。通過(guò)混合模式的特性，過(guò)濾掉了效果中一些我們不希望看見(jiàn)的顏色，只讓正確的顏色在正確的地方出現(xiàn)。

完整的代碼你可以猛擊：CSS 靈感 - 使用混合模式疊加實(shí)現(xiàn)文字波浪效果[2]

最后

好了，本文到此結(jié)束，希望對(duì)你有幫助 ????

本文沒(méi)有詳細(xì)的去講混合模式 mix-blend-mode 的一些基礎(chǔ)用法，感興趣的同學(xué)可以自行研究。

參考資料

[1]純 CSS 實(shí)現(xiàn)波浪效果!:

https://github.com/chokcoco/iCSS/issues/22

[2]CSS 靈感 - 使用混合模式疊加實(shí)現(xiàn)文字波浪效果:

https://csscoco.com/inspiration/#/./blendmode/mixblend-text-wave-effect


網(wǎng)頁(yè)題目：妙用CSS混合模式實(shí)現(xiàn)文字鏤空波浪效果
本文鏈接：http://www.5511xx.com/article/djipocc.html