今天偶然看到這樣一類很有意思的文字快閃動畫：
這類文字快閃切換效果運用得當的話，能比較好的吸引使用者的眼球。
當然，今天并非是想用 CSS 實作上述的的效果。在嘗試的過程中，我發現了另外一類能夠使用 CSS 非常輕松實作文字快閃動畫，運用了<code>blur()</code> 濾鏡和 <code>contrast()</code> 濾鏡産生的融合效果，類似于這樣：
這個技巧也在多篇文章就提及，本文再簡述下。
本文的重點，模糊濾鏡疊加對比度濾鏡産生的融合效果。單獨将兩個濾鏡拿出來，它們的作用分别是：
<code>filter: blur()</code>： 給圖像設定高斯模糊效果。
<code>filter: contrast()</code>： 調整圖像的對比度。
但是，當他們“合體”的時候，産生了奇妙的融合現象。
先來看一個簡單的例子：
CodePen Demo -- filter mix between blur and contrast
仔細看兩圓相交的過程，在邊與邊接觸的時候，會産生一種邊界融合的效果，通過對比度濾鏡把高斯模糊的模糊邊緣給幹掉，利用高斯模糊實作融合效果。
上述效果的實作基于兩點：
圖形是在被設定了 <code>filter: contrast()</code> 的畫布背景上進行動畫的
進行動畫的圖形被設定了 <code>filter: blur()</code>（ 進行動畫的圖形的父元素需要是被設定了 <code>filter: contrast()</code> 的畫布）
當然，背景色不一定是白色，我們稍稍修改上面的Demo，簡單的示意圖如下：
利用上述的技巧，我們可以實作文字的融合效果，像是這樣：
CodePen Demo -- word animation | word filter
這樣，利用這個技巧，我們可以巧妙構思一下動畫：
多個文字按順序依次出現（利用 <code>animation-delay</code> 進行控制處理）
做到上一個文字消失的同時，下一個文字出現
疊加上上述的濾鏡即可
核心代碼如下：
整段代碼，核心需要關注 <code>@keyframes change</code> 這個動畫，我們通過順序給文字添加上這個動畫（也就是利用 <code>animation-delay</code> 順序添加了延時）實作了上一個文字消失的過程下一個文字顯示的效果。
上述的 <code>.g-container</code> 添加了這樣一句代碼 -- <code>filter: contrast(15)</code>，去掉這句的話，效果是這樣的：
加上這句關鍵的代碼 -- <code>filter: contrast(15)</code>，整個效果就如一開始的題圖所示：
CodePen Demo -- 純 CSS 實作文字融合快閃切換效果
整個動畫的兩個核心關鍵點：
利用了 <code>blur</code> 濾鏡混合 <code>contrast</code> 濾鏡産生融合效果
在上一個文字消失的過程中，顯示下一個文字，以此産生目前展示文字是由上個文字演變而來的效果
由此，你可以通過 HTML 控制文字的條數、改變 SASS 變量中表示動畫時長的 <code>$speed</code> 和文字條數的 <code>$wordCount</code> 以及最終 <code>@keyframes change</code> 裡面的參數，不斷去調整優化你要的效果。演變出各種文字快閃效果。
好了，本文到此結束，希望本文對你有所幫助 😃
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。