建站
咨詢
售后
建站咨詢
新聞中心
最近，有同學(xué)詢問(wèn)，如何使用 CSS 實(shí)現(xiàn)如下效果：
創(chuàng)新互聯(lián)技術(shù)團(tuán)隊(duì)10多年來(lái)致力于為客戶提供成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、成都全網(wǎng)營(yíng)銷、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過(guò)多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了上千家網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。
看起來(lái)是個(gè)很有意思的動(dòng)效。
仔細(xì)思考一下，要想實(shí)現(xiàn)這類效果，其實(shí)用到的核心屬性只有一個(gè) -- background-clip: text。
有意思的 background-clip: text
background-clip: text 之前也提到多很多次。其核心就在于以區(qū)塊內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字的背景即為區(qū)塊的背景，文字之外的區(qū)域都將被裁剪掉。
簡(jiǎn)單而言，就是運(yùn)用了 background-clip: text 的元素，其背景內(nèi)容只保留文字所在區(qū)域部分，配合透明文字 color: transparent，就能夠利用文字透出背景。
利用 background-clip: text，能夠得到很多非常有意思的文字效果。
假設(shè)，我們有這樣一個(gè) Gif 圖：
我們可以利用這張動(dòng)圖和文字，實(shí)現(xiàn)一版，文字版的動(dòng)圖：
Lorem ......
p {
color: transparent;
background: url(https://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif) center/cover;
background-clip: text;
}我們就實(shí)現(xiàn)了這樣一個(gè)效果：
有點(diǎn)意思，CodePen Demo -- Rick Roll Knockout Text[1]。
上述效果及思路作用于一開始的效果即可：
- 實(shí)現(xiàn)一個(gè)背景動(dòng)畫。
- 當(dāng) hover 到文字的時(shí)候，讓文字透明。
- 讓動(dòng)畫開始。
我們首先需要實(shí)現(xiàn)一個(gè)會(huì)動(dòng)的條紋背景動(dòng)畫，方法有很多，我這里利用了 repeating-radial-gradient 配合 CSS @property：
@property --offset {
syntax: '';
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;
}
}
會(huì)得到這樣一幅變幻動(dòng)畫的條紋圖：
當(dāng)然，如果覺(jué)得使用 CSS 實(shí)現(xiàn)一個(gè)動(dòng)圖比較麻煩或者會(huì)存在兼容性問(wèn)題，也可以使用一些現(xiàn)成的 Gif 圖替代，譬如這樣一個(gè) Gif 圖作為
元素的背景：
有了會(huì)動(dòng)的效果之后，我們稍微改造下代碼，運(yùn)用上 background-clip: text，并且結(jié)合
元素的 hover 效果，在 hover 的時(shí)候，把文字從 #000 設(shè)置為透明 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[2]。
結(jié)合濾鏡與混合模式，碰撞出不一樣的火花
結(jié)束了嗎?沒(méi)有!
有了上述的鋪墊，我們繼續(xù)進(jìn)一步的嘗試，CSS 有兩個(gè)非常有意思的屬性，濾鏡 filter 與混合模式 mix-blend-mode。我們考慮把它們作用于我們的效果中。
還是這張 Gif 圖：
我們首先通過(guò)濾鏡 filter: grayscale(1)，將他從彩色的，處理成黑白灰的：
p {
background: url(xxx);
filter: grayscale(1);
}處理后的圖片，大概會(huì)是這樣：
基于一張黑白底色的圖片，我們?cè)龠\(yùn)用 background-clip: text，再通過(guò)混合模式 mix-blend-mode: hard-light，并且，很重要的一點(diǎn)，我們把這個(gè)效果放在黑色的背景之上：
body {
background: #000;
}
p {
color: transparent;
background: url(xxx) center/cover;
background-clip: text;
filter: grayscale(1);
mix-blend-mode: hard-light;
}將會(huì)得到這樣一種神奇的效果，通過(guò)混合模式的疊加處理，文字的亮部將會(huì)保留，而暗部則會(huì)與黑色背景融合：
這里，混合模式 mix-blend-mode: hard-light 發(fā)揮了非常重要的作用，去掉的話，是這樣的結(jié)果：
當(dāng)然，我們更希望的是，人的部分展示保留，而 Gif 圖片中的背景部分被隱藏，就完美了!
這里，我們繼續(xù)優(yōu)化下代碼，我們希望能把被 grayscale() 處理過(guò)的原圖的明暗部分置換，剛好，在 filter 中，存在一個(gè) invert() 函數(shù)，能夠反轉(zhuǎn)輸入圖像的色值。
因此，在 grayscale() 之后，再配合一次 invert(1) 函數(shù)：
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 實(shí)現(xiàn)了這樣一種 unbelievable 的文字效果：
CodePen Demo - Filter & MixBlendMode & BackgroundClip Text Animation Effect[3]。
利用這個(gè)技巧，只要有素材，我們就能放飛想象，實(shí)現(xiàn)各種類似的有意思的效果。
最后
好了，本文到此結(jié)束，希望對(duì)你有幫助 ????
參考資料
[1]CodePen Demo -- Rick Roll Knockout Text: https://codepen.io/Chokcoco/pen/GRyEodO。
[2]CodePen Demo -- BackgroundClip Wave Text: https://codepen.io/Chokcoco/pen/KKZmRQE。
[3]CodePen Demo - Filter & MixBlendMode & BackgroundClip Text Animation Effect: https://codepen.io/Chokcoco/pen/YzYQQGM?editors=1100。
當(dāng)前文章：巧用Background-Clip實(shí)現(xiàn)文字動(dòng)效
本文鏈接：http://www.dlmjj.cn/article/ccodocj.html
