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

承接上一篇你所不知道的 CSS 動畫技巧與細節，本文主要介紹 CSS 濾鏡的不經常使用用法，但願能給讀者帶來一些乾貨！

系列 CSS 文章彙總在個人 Github ，持續更新，歡迎點個 star 訂閱收藏。

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

基本用法

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

CodePen Demo -- Css3 filter

你能夠經過 hover 取消濾鏡，觀察該濾鏡的效果。

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

經常使用用法

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

1. 使用 filter: blur() 生成毛玻璃效果
2. 使用 filter: drop-shadow() 生成總體陰影效果
3. 使用 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%);
}

CodePen Demo -- CSS3 filter hover IMG

  

blur -- 生成圖像陰影

一般而言，咱們生成陰影的方式大可能是 box-shadow 、filter: drop-shadow() 、text-shadow 。可是，使用它們生成陰影是陰影只能是單色的。

有讀者同窗會問了，你這麼說，難道還能夠生成漸變色的陰影不成？

額，固然不行。

這個真不行，可是經過巧妙的利用 filter: blur 模糊濾鏡，咱們能夠僞裝生成漸變色或者說是顏色豐富的陰影效果。

假設咱們有下述這樣一張頭像圖片：

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

.avator {
    position: relative;
    background: url($img) no-repeat center center;
    background-size: 100% 100%;
    
    &::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;
    }
}

看看效果：

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

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

CodePen Demo -- filter create shadow

 

blur 混合 contrast 產生融合效果

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

單獨將兩個濾鏡拿出來，它們的做用分別是：

1. filter: blur()： 給圖像設置高斯模糊效果。
2. filter: contrast()： 調整圖像的對比度。

可是，當他們「合體」的時候，產生了奇妙的融合現象，經過對比度濾鏡把高斯模糊的模糊邊緣給幹掉，利用高斯模糊實現融合效果。

先來看一個簡單的例子：

CodePen Demo -- filter mix between blur and contrast

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

上述效果的實現基於兩點：

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

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

固然，背景色不必定是白色，咱們稍稍修改上面的Demo，簡單的示意圖以下：

燃燒的火焰

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

不用懷疑你的眼睛，上述 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);
}

大概是長這樣：

分解一下過程：

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

這裏會有個很大的疑問，增長了 filter: blur(20px) contrast(30); 以後，爲何純色黑色和黃色的中間，生成了一條紅色的邊框？

這裏我諮詢了幾個設計師、前端同事，獲得的答覆大概是兩個不一樣濾鏡的色值處理算法在邊界處疊加做用獲得了另一種顏色。（不必定準確，求賜教），在 PS 裏嘗試還原這個效果，可是 PS 沒有 contrast() 濾鏡，獲得的效果誤差挺大的。

OK，繼續正文，接下來，咱們只須要在火焰 .fire 這個 div 內部，用大量的黑色圓形，由下至上，無規律穿過火焰便可。因爲濾鏡的融合效果，火焰效果隨之產生，這裏爲了方便理解，我把背景色切換成白色，火焰動畫原理一看即懂：

具體完整實現能夠看這裏：

CodePen Demo -- CSS fire | CSS filter mix

 

文字融合動畫

另外，咱們能夠在動畫的過程當中，動態改變元素濾鏡的 filter: blur() 的值。

利用這個方法，咱們還能夠設計一些文字融合的效果：

具體實現你能夠看這裏：

CodePen Demo -- word animation | word filter

 

值得注意的細節點

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

1. CSS 濾鏡能夠給同個元素同時定義多個，例如 filter: contrast(150%) brightness(1.5) ，可是濾鏡的前後順序不一樣產生的效果也是不同的；

也就是說，使用 filter: contrast(150%) brightness(1.5) 和 filter: brightness(1.5) contrast(150%) 處理同一張圖片，獲得的效果是不同的，緣由在於濾鏡的色值處理算法對圖片處理的前後順序。

2. 濾鏡動畫須要大量的計算，不斷的重繪頁面，屬於很是消耗性能的動畫，使用時要注意使用場景。記得開啓硬件加速及合理使用分層技術；
3. blur() 混合 contrast() 濾鏡效果，設置不一樣的顏色會產生不一樣的效果，這個顏色疊加的具體算法本文做者暫時也不是很清楚，使用時比較好的方法是多嘗試不一樣顏色，觀察取最好的效果；
4. CSS3 filter 兼容性不算太好，可是在移動端已經能夠比較正常的使用，更爲精確的兼容性列表，查詢 Can i Use。

 更新於 2017-09-20，關於 blur 與 contrast 的融合算法，能夠看看我這位大腿同事給出的解釋：濾鏡算法以及WebGL實現

最後

系列 CSS 文章彙總在個人 Github ，持續更新，歡迎點個 star 訂閱收藏。

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

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。