巧用 background-clip 實作超強的文字動效

最近，有同學詢問，如何使用 CSS 實作如下效果：

看起來是個很有意思的動效，

仔細思考一下，要想實作這類效果，其實用到的核心屬性只有一個 -- background-clip: text，

有意思的 background-clip: text

background-clip: text 之前也提到多很多次，其核心就在于以區塊內的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都將被裁剪掉，

簡單而言，就是運用了 background-clip: text 的元素，其背景內容只保留文字所在區域部分，配合透明文字 color: transparent，就能夠利用文字透出背景，

利用 background-clip: text，能夠得到很多非常有意思的文字效果，

假設，我們有這樣一個 Gif 圖：

我們可以利用這張動圖和文字，實作一版，文字版的動圖：

<p>Lorem ......</p>

p {
  color: transparent;
  background: url(https://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif) center/cover;
  background-clip: text;
}

我們就實作了這樣一個效果：

有點意思，CodePen Demo -- Rick Roll Knockout Text

上述效果及思路作用于一開始的效果即可：

1. 實作一個背景影片
2. 當 hover 到文字的時候，讓文字透明
3. 讓影片開始

我們首先需要實作一個會動的條紋背景影片，方法有很多，我這里利用了 repeating-radial-gradient 配合 CSS @property：

<p></p>

@property --offset {
  syntax: '<length>';
  inherits: false;
  initial-value: 5px;
}
p {
  background: repeating-radial-gradient(circle at 0 0 , #000 calc(var(--offset) - 5px), #000 var(--offset), #fff var(--offset), #fff calc(var(--offset) + 5px));
    animation: move .5s infinite linear;
}
@keyframes move {
    to {
        --offset: 15px;
    }
}

會得到這樣一幅變幻影片的條紋圖：

當然，如果覺得使用 CSS 實作一個動圖比較麻煩或者會存在兼容性問題，也可以使用一些現成的 Gif 圖替代，譬如這樣一個 Gif 圖作為 <p> 元素的背景：

有了會動的效果之后，我們稍微改造下代碼，運用上 background-clip: text，并且結合 <p> 元素的 hover 效果，在 hover 的時候，把文字從 #000 設定為透明 transparent：

...
p {
    color: #000;
    
    &:hover {
        color: transparent;
        background: repeating-radial-gradient(circle at 0 0 , #000 calc(var(--offset) - 5px), #000 var(--offset), #fff var(--offset), #fff calc(var(--offset) + 5px));
        background-clip: text;
        animation: move .5s infinite linear;
    }
}
...

這樣，我們就成功的得到了題圖所示的效果了：

CodePen Demo -- BackgroundClip Wave Text

結合濾鏡與混合模式，碰撞出不一樣的火花

結束了嗎？沒有！

有了上述的鋪墊，我們繼續進一步的嘗試，CSS 有兩個非常有意思的屬性，濾鏡 filter 與混合模式 mix-blend-mode，我們考慮把它們作用于我們的效果中，

還是這張 Gif 圖：

我們首先通過濾鏡 filter: grayscale(1)，將他從彩色的，處理成黑白灰的：

p {
    background: url(xxx);
    filter: grayscale(1);
}

處理后的圖片，大概會是這樣：

基于一張黑白底色的圖片，我們再運用 background-clip: text，再通過混合模式 mix-blend-mode: hard-light，并且，很重要的一點，我們把這個效果放在黑色的背景之上：

body {
  background: #000;
}
p {
  color: transparent;
  background: url(xxx) center/cover;
  background-clip: text;
  filter: grayscale(1);
  mix-blend-mode: hard-light;
}

將會得到這樣一種神奇的效果，通過混合模式的疊加處理，文字的亮部將會保留，而暗部則會與黑色背景融合：

這里，混合模式 mix-blend-mode: hard-light 發揮了非常重要的作用，去掉的話，是這樣的結果：

當然，我們更希望的是，人的部分展示保留，而 Gif 圖片中的背景部分被隱藏，就完美了！

這里，我們繼續優化下代碼，我們希望能把被 grayscale() 處理過的原圖的明暗部分置換，剛好，在 filter 中，存在一個 invert() 函式，能夠反轉輸入影像的色值，

因此，在 grayscale() 之后，再配合一次 invert(1) 函式：

body {
  background: #000;
}
p {
  color: transparent;
  background: url(xxx) center/cover;
  background-clip: text;
  filter: grayscale(1) invert(1);
  mix-blend-mode: hard-light;
}

OK，至此，我們利用純 CSS 實作了這樣一種 unbelievable 的文字效果：

CodePen Demo - Filter & MixBlendMode & BackgroundClip Text Animation Effect

利用這個技巧，只要有素材，我們就能放飛想象，實作各種類似的有意思的效果，

最后

好了，本文到此結束，希望對你有幫助 ??

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

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

標籤：Html/Css

上一篇：使用python在SQL資料庫中選擇行時遇到問題

下一篇：淺拷貝