本文主要介紹 CSS 濾鏡的不常用用法炸茧，希望能給讀者帶來一些干貨二驰！
OK扔罪，下面直接進(jìn)入正文。本文所描述的濾鏡桶雀，指的是 CSS3 出來后的濾鏡矿酵，不是 IE 系列時(shí)代的濾鏡唬复，語法如下，還未接觸過這個(gè)屬性的可以先簡單到 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;
}
基本用法
先簡單看看幾種濾鏡的效果：
你可以通過 hover 取消濾鏡全肮，觀察該濾鏡的效果敞咧。
簡單來說，CSS 濾鏡就是提供類似 PS 的圖形特效辜腺，像模糊休建，銳化或元素變色等功能。通常被用于調(diào)整圖片评疗，背景和邊界的渲染测砂。本文就會(huì)圍繞這些濾鏡展開，看看具體能怎么使用或者玩出什么花活百匆。
常用用法
既然是標(biāo)題是你所不知道的技巧與細(xì)節(jié)砌些，那么比較常用的一些用法就不再贅述，通常我們見得比較多的 CSS 濾鏡用法有：
使用
filter: blur()生成毛玻璃效果使用
filter: drop-shadow()生成整體陰影效果使用
filter: opacity()生成透明度
如果對(duì)上面的技巧不是很了解加匈，可以稍稍百度谷歌一下存璃，下文將由淺及深，介紹一些不大常見的濾鏡的具體用法及一些小細(xì)節(jié)：
contrast/brightness — hover 增亮圖片
通常頁面上的按鈕雕拼，都會(huì)有 hover/active 的顏色變化有巧，以增強(qiáng)與用戶的交互。但是一些圖片展示悲没，則很少有 hover 的交互篮迎，運(yùn)用filter: contrast()或者filter: brightness()可以在 hover 圖片的時(shí)候，調(diào)整圖片的對(duì)比圖或者亮度示姿，達(dá)到聚焦用戶視野的目的甜橱。
brightness表示亮度，contrast 表示對(duì)比度栈戳。
當(dāng)然岂傲，這個(gè)方法同樣適用于按鈕，簡單的 CSS 代碼如下：
.btn:hover,
.img:hover {
transition: filter .3s;
filter: brightness(1.1) contrast(110%);
}
blur — 生成圖像陰影
通常而言子檀，我們生成陰影的方式大多是 box-shadow 镊掖、filter: drop-shadow() 、text-shadow 褂痰。但是亩进，使用它們生成陰影是陰影只能是單色的。
有讀者同學(xué)會(huì)問了缩歪，你這么說归薛，難道還可以生成漸變色的陰影不成？!
額，當(dāng)然不行主籍。
這個(gè)真不行习贫，但是通過巧妙的利用 filter: blur
模糊濾鏡，我們可以假裝生成漸變色或者說是顏色豐富的陰影效果千元。
假設(shè)我們有下述這樣一張頭像圖片：
下面就利用濾鏡苫昌，給它添加一層與原圖顏色相仿的陰影效果，核心 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;
}
}
看看效果：
其簡單的原理就是幸海，利用偽元素蜡歹，生成一個(gè)與原圖一樣大小的新圖疊加在原圖之下，然后利用濾鏡模糊 filter: blur()
配合其他的亮度/對(duì)比度涕烧，透明度等濾鏡月而，制作出一個(gè)虛幻的影子，偽裝成原圖的陰影效果议纯。
嗯父款，最重要的就是這一句 filter: blur(10px) brightness(80%) opacity(.8);
。
CodePen Demo — filter create （web前端學(xué)習(xí)交流群：328058344 禁止閑聊瞻凤，非喜勿進(jìn)：┰堋）
blur混合 contrast產(chǎn)生融合效果
接下來介紹的這個(gè)，是本文的重點(diǎn)阀参，模糊濾鏡疊加對(duì)比度濾鏡產(chǎn)生的融合效果肝集。讓你知道什么是 CSS 黑科技！
單獨(dú)將兩個(gè)濾鏡拿出來蛛壳，它們的作用分別是：
- filter: blur()： 給圖像設(shè)置高斯模糊效果杏瞻。
- filter: contrast()： 調(diào)整圖像的對(duì)比度。
但是衙荐，當(dāng)他們“合體”的時(shí)候捞挥，產(chǎn)生了奇妙的融合現(xiàn)象，通過對(duì)比度濾鏡把高斯模糊的模糊邊緣給干掉忧吟，利用高斯模糊實(shí)現(xiàn)融合效果砌函。
先來看一個(gè)簡單的例子：
仔細(xì)看兩圓相交的過程，在邊與邊接觸的時(shí)候溜族，會(huì)產(chǎn)生一種邊界融合的效果讹俊。
上述效果的實(shí)現(xiàn)基于兩點(diǎn)：
- 圖形是在被設(shè)置了 filter: contrast()的畫布背景上進(jìn)行動(dòng)畫的
- 進(jìn)行動(dòng)畫的圖形被設(shè)置了 filter: blur()（ 進(jìn)行動(dòng)畫的圖形的父元素需要是被設(shè)置了 filter: contrast()
的畫布）
意思是，上面兩圓運(yùn)動(dòng)的背后煌抒，其實(shí)是疊加了一張?jiān)O(shè)置了 filter: contrast()
的大白色背景仍劈，而兩個(gè)圓形則被設(shè)置了 filter: blur()
，兩個(gè)條件缺一不可摧玫。
當(dāng)然耳奕，背景色不一定是白色绑青，我們稍稍修改上面的Demo诬像，簡單的示意圖如下：
燃燒的火焰
好屋群，上面介紹完原理，下面看看使用這個(gè)效果制作的一些強(qiáng)大 CSS 效果坏挠，其中最為驚艷的就是使用融合效果制作生成火焰芍躏，這個(gè)效果我最早是見于 Yusuke Nakaya 這位作者：
不用懷疑你的眼睛，上述 GIF 效果就是使用純 CSS 實(shí)現(xiàn)的降狠。
核心還是 filter: contrast()
與 filter: blur()
配合使用对竣，不過實(shí)現(xiàn)的過程也非常有趣，我們需要使用 CSS 畫出一個(gè)火焰形狀榜配。
火焰形狀 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);
}
大概是長這樣：
分解一下過程：
放在純黑的背景下否纬，就得到了上述圖片的效果。
這里會(huì)有個(gè)很大的疑問蛋褥，增加了 filter: blur(20px) contrast(30);
之后临燃，為什么純色黑色和黃色的中間，生成了一條紅色的邊框烙心？
這里我咨詢了幾個(gè)設(shè)計(jì)師膜廊、前端同事，得到的答復(fù)大概是兩個(gè)不同濾鏡的色值處理算法在邊界處疊加作用得到了另外一種顏色淫茵。（不一定準(zhǔn)確爪瓜，求賜教），在 PS 里嘗試還原這個(gè)效果匙瘪，但是 PS 沒有 contrast() 濾鏡铆铆，得到的效果偏差挺大的。
OK丹喻，繼續(xù)正文算灸，接下來，我們只需要在火焰 .fire
這個(gè) div 內(nèi)部驻啤，用大量的黑色圓形菲驴，由下至上，無規(guī)律穿過火焰即可骑冗。由于濾鏡的融合效果赊瞬，火焰效果隨之產(chǎn)生，這里為了方便理解贼涩，我把背景色切換成白色巧涧，火焰動(dòng)畫原理一看即懂：
文字融合動(dòng)畫
另外，我們可以在動(dòng)畫的過程中遥倦，動(dòng)態(tài)改變?cè)貫V鏡的 filter: blur()
的值谤绳。
利用這個(gè)方法占锯，我們還可以設(shè)計(jì)一些文字融合的效果：
具體實(shí)現(xiàn)你可以看這里：
CodePen Demo — word animation | word filter（https://codepen.io/Chokcoco/pen/jLjNRj）
值得注意的細(xì)節(jié)點(diǎn)
動(dòng)畫雖然美好，但是具體使用的過程中缩筛，仍然有一些需要注意的地方：
- CSS 濾鏡可以給同個(gè)元素同時(shí)定義多個(gè)消略，例如 filter: contrast(150%) brightness(1.5)
，但是濾鏡的先后順序不同產(chǎn)生的效果也是不一樣的瞎抛；
也就是說艺演，使用 filter: contrast(150%) brightness(1.5)
和 filter: brightness(1.5) contrast(150%)
處理同一張圖片，得到的效果是不一樣的桐臊，原因在于濾鏡的色值處理算法對(duì)圖片處理的先后順序胎撤。
- 濾鏡動(dòng)畫需要大量的計(jì)算，不斷的重繪頁面断凶，屬于非常消耗性能的動(dòng)畫伤提，使用時(shí)要注意使用場(chǎng)景。記得開啟硬件加速及合理使用分層技術(shù)认烁；
- blur()混合 contrast()濾鏡效果肿男，設(shè)置不同的顏色會(huì)產(chǎn)生不同的效果，這個(gè)顏色疊加的具體算法本文作者暫時(shí)也不是很清楚砚著，使用時(shí)比較好的方法是多嘗試不同顏色次伶，觀察取最好的效果；
- CSS3 filter 兼容性不算太好稽穆，但是在移動(dòng)端已經(jīng)可以比較正常的使用冠王，更為精確的兼容性列表，查詢 Can i Use舌镶。
