本文主要介紹CSS過濾器的不常見用法，希望給讀者帶來一些干貨！

好的，直接轉到下面的文本。本文描述的過濾器是指CSS3問世后的過濾器，而不是工業工程系列時代的過濾器。語法如下。如果您沒有接觸過這個屬性，您可以像MDN-Filter一樣簡單地理解它:

``

{

濾波器:模糊(5px)；

filter:亮度(0.4)；

filter:對比度(200%)；

filter : drop-shadow(16px 16px 20px藍色)；

filter:灰度(50%)；

filter:色調旋轉(90度)；

filter:反轉(75%)；

filter:不透明度(25%)；

filter:飽和(30%)；

filter : sepia(60%)；

``

``

/*應用多個濾鏡*/

濾鏡:對比度(175%)亮度(3%)；

/*全局值*/

filter:繼承；

filter: initial

filter: unset

}

```

## 基本用法

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


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

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


## 常用用法

既然是標題是你所不知道的技巧與細節，那么比較常用的一些用法就不再贅述，通常我們見得比較多的 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:亮度(1.1)對比度(110%)；

}

```



## blur — 生成圖像陰影

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

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


額，當然不行。


這個真不行，但是通過巧妙的利用 filter: blur

模糊濾鏡，我們可以假裝生成漸變色或者說是顏色豐富的陰影效果。

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


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

。avator {

相對位置:

background: url($img)不重復中心中心；

背景尺寸: 100% 100%；

``

``

:after {

content :“”；

position:絕對值；

top : 10%；

寬度:±100%；

height : 100%；

background: inherit

背景尺寸: 100% 100%；

filter:模糊(10px)亮度(80%)不透明度(. 8)；

z-index :-1；

}

}

``

看看效果:

！[](http://上傳-圖片。建設/上傳-圖片/8373224-7af75a4486f98a54.png？imageMogr 2/自動定向/條帶%7CimageView2/2/w/1240)

其簡單原理是使用偽元素生成與原始圖像大小相同的新圖像，并將其疊加在原始圖像下，然后使用濾鏡模糊濾鏡:模糊()

與其他亮度/對比度、透明度和其他濾鏡合作，創建一個虛幻的陰影，并將其偽裝成原始圖像的陰影效果。

嗯，最重要的是這句話:濾鏡:模糊(10px)亮度(80%)不透明度(. 8)；

.

代碼pendemo-filtercreate)

##模糊混合對比度產生融合效果

這是本文的重點。模糊濾鏡疊加對比度濾鏡產生的融合效果。讓你知道什么是CSS黑色技術！

分別取出兩個過濾器。他們的職能是:

1。filter: blur():在圖像上設置高斯模糊效果。

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

然而，當它們“結合在一起”時，會有一種奇妙的融合現象。通過對比度濾波消除高斯模糊的模糊邊緣，通過高斯模糊實現融合效果。

讓我們看一個簡單的例子:

！[微信圖片_ 201710131002608.gif] (http://上傳-圖片。建shu.io/upload _圖片/8373224-f58712a351cb8253.gif？imageMogr 2/自動定向/剝離)

仔細觀察兩個圓圈相交的過程。當邊緣相互接觸時，將產生邊界融合效應。

上述效果的實現基于兩點:

1。圖形在畫布背景上以濾鏡:對比度設置為動畫()

2。要被動畫化的圖形用過濾器: blur()設置(要被動畫化的圖形的父元素需要用過濾器:對比度()設置)

畫布)

意味著上面兩個圓圈的運動背后實際上是一個疊加的對比度()和濾波器:

有一個大的白色背景，而這兩個圓是用filter: blur()設置的

，兩個條件是必不可少的。

當然，背景顏色不一定是白色。我們稍微修改了上面的演示。簡單示意圖如下:

！[](http://上傳-圖片。建設/上傳-圖片/8373224-ef2e140b3ac33409。巴布亞新幾內亞？imageMogr 2/自動定向/條帶%7CimageView2/2/w/1240)

燃燒的火焰

好吧，在介紹了上面的原理之后，讓我們來看看用這種效果產生的一些強大的CSS效果。其中，最驚人的是利用融合效應產生火焰。這種效果最早是由作者中野裕介看到的:

！[微信圖片_ 20171013102804.gif] (http://上傳-圖片。建shu.io/Upload _圖片/8373224-28D 45081db917631.gif？imageMogr 2/自動定向/剝離)

不要懷疑你的眼睛，上面的GIF效果是用純CSS實現的。

內核或濾波器:對比度()

和濾波器:模糊()

一起使用，但實施過程也很有趣。我們需要用CSS畫一個火焰形狀。

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

``

?；?/p>

width : 0；

height : 0；

border-radius : 45%；

box-sizing : border-box；

border: 100px固體# 000；

border-bottom : 100 pxsolid transparent；

background-color : # b 5932 f；

transform : Scalex(. 4)；

filter:模糊(20px)對比度(30)；

}

``

看起來像這樣:

！[(http://上傳-圖片。建書。io/上傳-圖片/8373224-5f 0 b5 db 61eb 476 EC。png？imageMogr 2/自動定向/條帶%7CimageView2/2/w/1240)

分解流程:


在純黑色背景上，你會得到上圖的效果。

這里會有一個大問題，添加濾鏡:模糊(20px)對比度(30)；

在
之后，為什么黑色和黃色之間會出現紅色邊框？

我在這里咨詢了幾位設計師和前端同事，我得到的答案可能是，兩個不同濾鏡的顏色值處理算法在邊界重疊以獲得另一種顏色。 (不一定準確，請評論)，嘗試在PS中恢復這種效果，但PS沒有對比度()過濾器，結果偏差相當大。

好，繼續課文。接下來，我們只需要把火放在火里。

在這個分區內，從下到上使用大量黑色圓圈，不規則地穿過火焰。由于過濾器的融合效果，產生火焰效果。為了便于理解，我將背景顏色切換為白色?；鹧鎰赢嫷脑硪荒苛巳?

！[](http://上傳-圖片。建設/上傳-圖片/8373224-86 a5 F5 da 6a 95080 . gif？imageMogr 2/自動定向/剝離)

##文本融合動畫

此外，我們可以在動畫制作過程中動態更改元素濾鏡的濾鏡:模糊()

的價值。

使用這種方法，我們還可以設計一些文本融合效果:

！[](http://上傳-圖片。建設/上傳-圖片/8373224-b0725f40883e356e.gif？imageMogr 2/自動定向/剝離)

！[](http://上傳-圖片。建設. io/上傳-圖片/8373224-3a 91b 42e 02821添加. gif？imageMogr 2/自動定向/剝離)

具體實施情況見下文:

Code Pendemo-Word動畫|文字過濾器(https://codepen.io/Chokcoco/pen/jLjNRj)

##值得注意的細節

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

1。CSS濾鏡可以同時為同一元素定義多個濾鏡，例如，濾鏡:對比度(150%)亮度(1.5)

，但不同順序的過濾器效果不同。

也就是說，使用:°對比度(150%)亮度(1.5)。

和濾波器:亮度(1.5)對比度(150%)

處理同一張圖片會產生不同的結果，因為濾鏡的顏色值處理算法會按順序處理圖片。

2。過濾動畫需要大量的計算和連續重繪頁面。這是一個非常消耗性能的動畫。使用它時，你應該注意場景。記住打開硬件加速，合理使用分層技術；

3。模糊()混合對比度()濾鏡效果，設置不同的顏色會產生不同的效果，這種顏色疊加的具體算法暫時不是很清楚，更好的使用方法是嘗試不同的顏色并觀察以獲得最佳效果；

4。CSS3過濾器的兼容性不是很好，但可以在移動端正常使用。要獲得更準確的兼容性列表，請選中“我可以使用嗎”。

福州友誠互聯網，一家致力于福州網站建設的網站制作公司，為客戶提供小程序制作，促進福州網絡全網推廣，準確開發客戶。歡迎來到http://www.simple-vegetarian-recipes.com