本篇文章帶大家看看怎么利用CSS3濾鏡實現(xiàn)高級感拉滿的文字快閃切換動畫效果，希望對大家有所幫助！

今天偶然看到這樣一類很有意思的文字快閃動畫：

這類文字快閃切換效果運用得當?shù)脑?，能比較好的吸引用戶的眼球?！就扑]學(xué)習：css視頻教程】

當然，今天并非是想用 CSS 實現(xiàn)上述的的效果。在嘗試的過程中，我發(fā)現(xiàn)了另外一類能夠使用 CSS 非常輕松實現(xiàn)文字快閃動畫，運用了blur() 濾鏡和 contrast() 濾鏡產(chǎn)生的融合效果，類似于這樣：

這個技巧也在多篇文章就提及，本文再簡述下。

blur 濾鏡混合 contrast 濾鏡產(chǎn)生融合效果

本文的重點，模糊濾鏡疊加對比度濾鏡產(chǎn)生的融合效果。單獨將兩個濾鏡拿出來，它們的作用分別是：

• filter: blur()： 給圖像設(shè)置高斯模糊效果。

• filter: contrast()： 調(diào)整圖像的對比度。

但是，當他們“合體”的時候，產(chǎn)生了奇妙的融合現(xiàn)象。

先來看一個簡單的例子：

CodePen Demo -- filter mix between blur and contrast

https://codepen.io/Chokcoco/pen/QqWBqV

仔細看兩圓相交的過程，在邊與邊接觸的時候，會產(chǎn)生一種邊界融合的效果，通過對比度濾鏡把高斯模糊的模糊邊緣給干掉，利用高斯模糊實現(xiàn)融合效果。

上述效果的實現(xiàn)基于兩點：

• 圖形是在被設(shè)置了 filter: contrast() 的畫布背景上進行動畫的

• 進行動畫的圖形被設(shè)置了 filter: blur()（ 進行動畫的圖形的父元素需要是被設(shè)置了 filter: contrast() 的畫布）

當然，背景色不一定是白色，我們稍稍修改上面的Demo，簡單的示意圖如下：

使用 blur/contrast 濾鏡實現(xiàn)文字的切換

利用上述的技巧，我們可以實現(xiàn)文字的融合效果，像是這樣：

CodePen Demo -- word animation | word filter

https://codepen.io/Chokcoco/pen/jLjNRj

這樣，利用這個技巧，我們可以巧妙構(gòu)思一下動畫：

• 多個文字按順序依次出現(xiàn)（利用 animation-delay 進行控制處理）

• 做到上一個文字消失的同時，下一個文字出現(xiàn)

• 疊加上上述的濾鏡即可

核心代碼如下：

<div class="g-container">
??<div class="word">iPhone</div>
??<div class="word">13</div>
??<div class="word">Pro</div>
??<div class="word">強得很！</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 這個動畫，我們通過順序給文字添加上這個動畫（也就是利用 animation-delay 順序添加了延時）實現(xiàn)了上一個文字消失的過程下一個文字顯示的效果。

上述的 .g-container 添加了這樣一句代碼 -- filter: contrast(15)，去掉這句的話，效果是這樣的：

加上這句關(guān)鍵的代碼 -- filter: contrast(15)，整個效果就如一開始的題圖所示：

CodePen Demo -- 純 CSS 實現(xiàn)文字融合快閃切換效果

https://codepen.io/Chokcoco/pen/xxLjdmz

整個動畫的兩個核心關(guān)鍵點：

• 利用了 blur 濾鏡混合 contrast 濾鏡產(chǎn)生融合效果

• 在上一個文字消失的過程中，顯示下一個文字，以此產(chǎn)生當前展示文字是由上個文字演變而來的效果

由此，你可以通過 HTML 控制文字的條數(shù)、改變 SASS 變量中表示動畫時長的 $speed 和文字條數(shù)的 $wordCount 以及最終 @keyframes change 里面的參數(shù)，不斷去調(diào)整優(yōu)化你要的效果。演變出各種文字快閃效果。

最后

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

原文地址：https://segmentfault.com/a/1190000040965698

作者：chokcoco

（學(xué)習視頻分享：web前端入門）

以上是巧用CSS3濾鏡制作文字快閃切換動畫效果！的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！