巧用CSS3濾鏡製作文字快閃切換動畫效果！-css教學-PHP中文網

這篇文章帶大家看看怎麼利用CSS3濾鏡實現高級感拉滿的文字快閃切換動畫效果，希望對大家有幫助！

巧用CSS3濾鏡製作文字快閃切換動畫效果！

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

#這類文字快閃切換效果運用得當的話，能比較好的吸引使用者的眼球。【推薦學習：css影片教學】

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

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

blur 濾鏡混合 contrast 濾鏡產生融合效果

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

filter: blur()：給影像設定高斯模糊效果。
filter: contrast()：調整影像的對比。

但是，當他們「合體」的時候，產生了奇妙的融合現象。

先來看一個簡單的例子：

CodePen Demo -- filter mix between blur and contrast

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

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

上述效果的實作是基於兩點：

圖形是在被設定了filter: contrast()的畫布背景上進行動畫的
進行動畫的圖形被設定了filter: blur()（進行動畫的圖形的父元素需要是被設定了filter: contrast( )的畫布）

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

使用blur/contrast 濾鏡實作文字的切換

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

CodePen Demo -- word animation | word filter

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

這樣，利用這個技巧，我們可以巧妙構思動畫：

多個文字依序出現（利用animation-delay進行控制處理）
做到上一個文字消失的同時，下一個文字出現
#疊加上上述的濾鏡即可

核心程式碼如下：

 iPhone
 13
 Pro
 强得很！

登入後複製

@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; } }

登入後複製

整段程式碼，核心需要注意@keyframes change這個動畫，我們透過順序為文字添加上這個動畫（也就是利用animation -delay順序加入了延時）實現了上一個文字消失的過程下一個文字顯示的效果。

上述的.g-container新增了這樣一句程式碼--filter: contrast(15)，去掉這句的話，效果是這樣的：