巧用濾鏡實(shí)現(xiàn)高級感拉滿的文字快閃切換效果
今天偶然看到這樣一類很有意思的文字快閃動(dòng)畫：
這類文字快閃切換效果運(yùn)用得當(dāng)?shù)脑挘鼙容^好的吸引用戶的眼球。
當(dāng)然，今天并非是想用 CSS 實(shí)現(xiàn)上述的的效果。在嘗試的過程中，我發(fā)現(xiàn)了另外一類能夠使用 CSS 非常輕松實(shí)現(xiàn)文字快閃動(dòng)畫，運(yùn)用了blur() 濾鏡和 contrast() 濾鏡產(chǎn)生的融合效果，類似于這樣：
這個(gè)技巧也在多篇文章就提及，本文再簡述下。
blur 濾鏡混合 contrast 濾鏡產(chǎn)生融合效果
本文的重點(diǎn)，模糊濾鏡疊加對比度濾鏡產(chǎn)生的融合效果。單獨(dú)將兩個(gè)濾鏡拿出來，它們的作用分別是：
- filter: blur()：給圖像設(shè)置高斯模糊效果。
- filter: contrast()：調(diào)整圖像的對比度。
但是，當(dāng)他們“合體”的時(shí)候，產(chǎn)生了奇妙的融合現(xiàn)象。
先來看一個(gè)簡單的例子：
CodePen Demo -- filter mix between blur and contrast[1]
仔細(xì)看兩圓相交的過程，在邊與邊接觸的時(shí)候，會產(chǎn)生一種邊界融合的效果，通過對比度濾鏡把高斯模糊的模糊邊緣給干掉，利用高斯模糊實(shí)現(xiàn)融合效果。
上述效果的實(shí)現(xiàn)基于兩點(diǎn)：
- 圖形是在被設(shè)置了 filter: contrast() 的畫布背景上進(jìn)行動(dòng)畫的
- 進(jìn)行動(dòng)畫的圖形被設(shè)置了 filter: blur()( 進(jìn)行動(dòng)畫的圖形的父元素需要是被設(shè)置了 filter: contrast() 的畫布)
當(dāng)然，背景色不一定是白色，我們稍稍修改上面的Demo，簡單的示意圖如下：
使用 blur/contrast 濾鏡實(shí)現(xiàn)文字的切換
利用上述的技巧，我們可以實(shí)現(xiàn)文字的融合效果，像是這樣：
這樣，利用這個(gè)技巧，我們可以巧妙構(gòu)思一下動(dòng)畫：
- 多個(gè)文字按順序依次出現(xiàn)(利用 animation-delay 進(jìn)行控制處理)
- 做到上一個(gè)文字消失的同時(shí)，下一個(gè)文字出現(xiàn)
- 疊加上上述的濾鏡即可
核心代碼如下：
- <div class="g-container">
- <div class="word">iPhone</div>
- <div class="word">13</div>
- <div class="word">Pro</div>
- <div class="word">強(qiáng)得很！</div>
- </div>
- @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
- $speed: 8s;
- $wordCount: 4;
- .g-container {
- position: relative;
- width: 100vw;
- height: 100vh;
- background: #000;
- font-family: 'Montserrat', sans-serif;
- color: #fff;
- font-size: 120px;
- filter: contrast(15);
- }
- .word {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- animation: change $speed infinite ease-in-out;
- @for $i from 0 to $wordCount {
- &:nth-child(#{$i + 1}) {
- animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
- }
- }
- }
- @keyframes change {
- 0%,
- 5%,
- 100% {
- filter: blur(0px);
- opacity: 1;
- }
- 50%,
- 80% {
- filter: blur(80px);
- opacity: 0;
- }
- }
整段代碼，核心需要關(guān)注 @keyframes change 這個(gè)動(dòng)畫，我們通過順序給文字添加上這個(gè)動(dòng)畫(也就是利用 animation-delay 順序添加了延時(shí))實(shí)現(xiàn)了上一個(gè)文字消失的過程下一個(gè)文字顯示的效果。
上述的 .g-container 添加了這樣一句代碼 -- filter: contrast(15)，去掉這句的話，效果是這樣的：
加上這句關(guān)鍵的代碼 -- filter: contrast(15)，整個(gè)效果就如一開始的題圖所示：
CodePen Demo -- 純 CSS 實(shí)現(xiàn)文字融合快閃切換效果[2]
整個(gè)動(dòng)畫的兩個(gè)核心關(guān)鍵點(diǎn)：
- 利用了 blur 濾鏡混合 contrast 濾鏡產(chǎn)生融合效果
- 在上一個(gè)文字消失的過程中，顯示下一個(gè)文字，以此產(chǎn)生當(dāng)前展示文字是由上個(gè)文字演變而來的效果
由此，你可以通過 HTML 控制文字的條數(shù)、改變 SASS 變量中表示動(dòng)畫時(shí)長的 $speed 和文字條數(shù)的 $wordCount 以及最終 @keyframes change 里面的參數(shù)，不斷去調(diào)整優(yōu)化你要的效果。演變出各種文字快閃效果。
最后
好了，本文到此結(jié)束，希望本文對你有所幫助 :)
參考資料
[1]CodePen Demo -- filter mix between blur and contrast:
https://codepen.io/Chokcoco/pen/QqWBqV
[2]CodePen Demo -- 純 CSS 實(shí)現(xiàn)文字融合快閃切換效果:
https://codepen.io/Chokcoco/pen/xxLjdmz
