你所不知道的CSS濾鏡技巧與細節

本文主要介紹 CSS 濾鏡的不常用用法，希望能給讀者帶來一些幹貨!

OK，下面直接進入正文。本文所描述的濾鏡，指的是 CSS3 出來後的濾鏡，不是 IE 系列時代的濾鏡，文法如下，還未接觸過這個屬性的可以先簡單到 MDN — filter 了解下：

{ 

    filter: blur(5px); 

    filter: brightness(0.4); 

    filter: contrast(200%); 

    filter: drop-shadow(16px 16px 20px blue); 

    filter: grayscale(50%); 

    filter: hue-rotate(90deg); 

    filter: invert(75%); 

    filter: opacity(25%); 

    filter: saturate(30%); 

    filter: sepia(60%); 

    /* Apply multiple filters */ 

    filter: contrast(175%) brightness(3%); 

    /* Global values */ 

    filter: inherit; 

    filter: initial; 

    filter: unset; 

}  

基本用法

先簡單看看幾種濾鏡的效果：

<a href="http://s3.51cto.com/wyfs02/M02/08/22/wKiom1nczXDzvON3AAF8yU3_yws259.jpg-wh_651x-s_1144133869.jpg" target="_blank"></a>

你可以通過 hover 取消濾鏡，觀察該濾鏡的效果。

簡單來說，CSS 濾鏡就是提供類似 PS 的圖形特效，像模糊，銳化或元素變色等功能。通常被用于調整圖檔，背景和邊界的渲染。本文就會圍繞這些濾鏡展開，看看具體能怎麼使用或者玩出什麼花活。

<a href="http://s2.51cto.com/wyfs02/M01/08/23/wKiom1nc07zhqOM9AAA5ueFBBGA522.jpg" target="_blank"></a>

常用用法

既然是标題是你所不知道的技巧與細節，那麼比較常用的一些用法就不再贅述，通常我們見得比較多的 CSS 濾鏡用法有：

使用 filter: blur() 生成毛玻璃效果

使用 filter: drop-shadow() 生成整體陰影效果

使用 filter: opacity() 生成透明度

如果對上面的技巧不是很了解，可以稍稍百度谷歌一下，下文将由淺及深，介紹一些不大常見的濾鏡的具體用法及一些小細節：

contrast/brightness — hover 增亮圖檔

通常頁面上的按鈕，都會有 hover/active 的顔色變化，以增強與使用者的互動。但是一些圖檔展示，則很少有 hover 的互動，運用

filter: contrast() 或者 filter: brightness() 可以在 hover

圖檔的時候，調整圖檔的對比圖或者亮度，達到聚焦使用者視野的目的。

brightness表示亮度，contrast 表示對比度。

當然，這個方法同樣适用于按鈕，簡單的 CSS 代碼如下：

.btn:hover, 

.img:hover { 

    transition: filter .3s; 

    filter: brightness(1.1) contrast(110%); 

<a href="http://s5.51cto.com/wyfs02/M02/A6/D5/wKioL1ncZPDDbIVRAAYiSCmxp3I522.gif" target="_blank"></a>

blur — 生成圖像陰影

通常而言，我們生成陰影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它們生成陰影是陰影隻能是單色的。

有讀者同學會問了，你這麼說，難道還可以生成漸變色的陰影不成?

<a href="http://s1.51cto.com/wyfs02/M00/A6/D5/wKioL1ncZRSReazCAAAilEvjIAE402.jpg" target="_blank"></a>

額，當然不行。

<a href="http://s3.51cto.com/wyfs02/M02/08/23/wKiom1nc1CvASx9XAABYEz3fZ7E343.jpg" target="_blank"></a>

這個真不行，但是通過巧妙的利用 filter: blur 模糊濾鏡，我們可以假裝生成漸變色或者說是顔色豐富的陰影效果。

假設我們有下述這樣一張頭像圖檔：

<a href="http://s2.51cto.com/wyfs02/M01/A6/D5/wKioL1ncZTHwacmTAACDsjfWAaA675.jpg" target="_blank"></a>

下面就利用濾鏡，給它添加一層與原圖顔色相仿的陰影效果，核心 CSS 代碼如下：

.avator { 

    position: relative; 

    background: url($img) no-repeat center center; 

    background-size: 100% 100%; 

    &amp;::after { 

        content: ""; 

        position: absolute; 

        top: 10%; 

        width: 100%; 

        height: 100%; 

        background: inherit; 

        background-size: 100% 100%; 

        filter: blur(10px) brightness(80%) opacity(.8); 

        z-index: -1; 

    } 

看看效果：

<a href="http://s4.51cto.com/wyfs02/M02/08/23/wKiom1nc1F-yZd0oAACmyD6Gj-o628.jpg" target="_blank"></a>

其簡單的原理就是，利用僞元素，生成一個與原圖一樣大小的新圖疊加在原圖之下，然後利用濾鏡模糊 filter: blur() 配合其他的亮度/對比度，透明度等濾鏡，制作出一個虛幻的影子，僞裝成原圖的陰影效果。

嗯，最重要的就是這一句 filter: blur(10px) brightness(80%) opacity(.8);。

CodePen Demo — filter create shadow(https://codepen.io/Chokcoco/pen/eGYYpo)

blur 混合 contrast 産生融合效果

接下來介紹的這個，是本文的重點，模糊濾鏡疊加對比度濾鏡産生的融合效果。讓你知道什麼是 CSS 黑科技!

單獨将兩個濾鏡拿出來，它們的作用分别是：

filter: blur()： 給圖像設定高斯模糊效果。

filter: contrast()： 調整圖像的對比度。

但是，當他們“合體”的時候，産生了奇妙的融合現象，通過對比度濾鏡把高斯模糊的模糊邊緣給幹掉，利用高斯模糊實作融合效果。

先來看一個簡單的例子：

<a href="http://s3.51cto.com/wyfs02/M01/A6/D5/wKioL1ncZW_R1VKQAAE1G7N8r48414.gif" target="_blank"></a>

仔細看兩圓相交的過程，在邊與邊接觸的時候，會産生一種邊界融合的效果。

上述效果的實作基于兩點：

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

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

意思是，上面兩圓運動的背後，其實是疊加了一張設定了 filter: contrast() 的大白色背景，而兩個圓形則被設定了 filter: blur() ，兩個條件缺一不可。

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

<a href="http://s3.51cto.com/wyfs02/M00/08/23/wKiom1nc1I_hhXFKAAC9921hWyE112.jpg" target="_blank"></a>

燃燒的火焰

好，上面介紹完原理，下面看看使用這個效果制作的一些強大 CSS 效果，其中最為驚豔的就是使用融合效果制作生成火焰，這個效果我最早是見于 Yusuke Nakaya 這位作者：

<a href="http://s3.51cto.com/wyfs02/M00/A6/D5/wKioL1ncZZShRZ7UAATmVuOPEIc310.gif" target="_blank"></a>

不用懷疑你的眼睛，上述 GIF 效果就是使用純 CSS 實作的。

核心還是 filter: contrast() 與 filter: blur() 配合使用，不過實作的過程也非常有趣，我們需要使用 CSS 畫出一個火焰形狀。

火焰形狀 CSS 核心代碼如下：

.fire { 

    width: 0; 

    height: 0; 

    border-radius: 45%; 

    box-sizing: border-box; 

    border: 100px solid #000; 

    border-bottom: 100pxsolid transparent; 

    background-color: #b5932f; 

    transform: scaleX(.4); 

    filter: blur(20px) contrast(30); 

大概是長這樣：

<a href="http://s1.51cto.com/wyfs02/M02/A6/D5/wKioL1ncZbOjPxq1AAAvKalwWcc448.jpg" target="_blank"></a>

分解一下過程：

<a href="http://s1.51cto.com/wyfs02/M00/08/23/wKiom1nc1Mrj4XN6AADRUi0IY-I228.jpg" target="_blank"></a>

放在純黑的背景下，就得到了上述圖檔的效果。

這裡會有個很大的疑問，增加了 filter: blur(20px) contrast(30); 之後，為什麼純色黑色和黃色的中間，生成了一條紅色的邊框?

這裡我咨詢了幾個設計師、前端同僚，得到的答複大概是兩個不同濾鏡的色值處理算法在邊界處疊加作用得到了另外一種顔色。(不一定準确，求賜教)，在 PS 裡嘗試還原這個效果，但是 PS 沒有 contrast() 濾鏡，得到的效果偏差挺大的。

OK，繼續正文，接下來，我們隻需要在火焰 .fire 這個 div 内部，用大量的黑色圓形，由下至上，無規律穿過火焰即可。由于濾鏡的融合效果，火焰效果随之産生，這裡為了友善了解，我把背景色切換成白色，火焰動畫原理一看即懂：

<a href="http://s3.51cto.com/wyfs02/M01/08/23/wKiom1nc1V3CiuU8AAc_wQ00Kbc099.gif" target="_blank"></a>

具體完整實作可以看這裡：

CodePen Demo — CSS fire | CSS filter mix(https://codepen.io/Chokcoco/pen/GvbMmE)

文字融合動畫

另外，我們可以在動畫的過程中，動态改變元素濾鏡的 filter: blur() 的值。

利用這個方法，我們還可以設計一些文字融合的效果：

<a href="http://s5.51cto.com/wyfs02/M02/A6/D5/wKioL1ncZqTCKC5cAAHOqlt6Vhg856.gif" target="_blank"></a>

<a href="http://s1.51cto.com/wyfs02/M01/08/23/wKiom1nc1buhe8wwAAIJ_NJIBSo928.gif" target="_blank"></a>

具體實作你可以看這裡：

CodePen Demo — word animation | word filter(https://codepen.io/Chokcoco/pen/jLjNRj)

值得注意的細節點

動畫雖然美好，但是具體使用的過程中，仍然有一些需要注意的地方：

CSS 濾鏡可以給同個元素同時定義多個，例如 filter: contrast(150%) brightness(1.5)

，但是濾鏡的先後順序不同産生的效果也是不一樣的;也就是說，使用 filter: contrast(150%) brightness(1.5) 和

filter: brightness(1.5) contrast(150%)

處理同一張圖檔，得到的效果是不一樣的，原因在于濾鏡的色值處理算法對圖檔處理的先後順序。

濾鏡動畫需要大量的計算，不斷的重繪頁面，屬于非常消耗性能的動畫，使用時要注意使用場景。記得開啟硬體加速及合理使用分層技術;

blur() 混合 contrast() 濾鏡效果，設定不同的顔色會産生不同的效果，這個顔色疊加的具體算法本文作者暫時也不是很清楚，使用時比較好的方法是多嘗試不同顔色，觀察取最好的效果;

CSS3 filter 相容性不算太好，但是在移動端已經可以比較正常的使用，更為精确的相容性清單，查詢 Can i Use。

最後

系列 CSS 文章彙總在我的 Github (https://github.com/chokcoco/iCSS)，持續更新，歡迎點個 star 訂閱收藏。

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

本文作者：佚名

來源：51CTO