淺談網(wǎng)站制作中CSS濾鏡技巧與細(xì)節(jié)
本文主要介紹CSS過濾器的不常見用法，希望給讀者帶來一些干貨！
好的，直接轉(zhuǎn)到下面的文本。本文描述的過濾器是指CSS3問世后的過濾器，而不是工業(yè)工程系列時(shí)代的過濾器。語(yǔ)法如下。如果您沒有接觸過這個(gè)屬性，您可以像MDN-Filter一樣簡(jiǎn)單地理解它:
``
{
濾波器:模糊(5px)；
filter:亮度(0.4)；
filter:對(duì)比度(200%)；
filter : drop-shadow(16px 16px 20px藍(lán)色)；
filter:灰度(50%)；
filter:色調(diào)旋轉(zhuǎn)(90度)；
filter:反轉(zhuǎn)(75%)；
filter:不透明度(25%)；
filter:飽和(30%)；
filter : sepia(60%)；
``
``
/*應(yīng)用多個(gè)濾鏡*/
濾鏡:對(duì)比度(175%)亮度(3%)；
/*全局值*/
filter:繼承；
filter: initial
filter: unset
}
```
## 基本用法
先簡(jiǎn)單看看幾種濾鏡的效果：
你可以通過 hover 取消濾鏡，觀察該濾鏡的效果。
簡(jiǎn)單來說，CSS 濾鏡就是提供類似 PS 的圖形特效，像模糊，銳化或元素變色等功能。通常被用于調(diào)整圖片，背景和邊界的渲染。本文就會(huì)圍繞這些濾鏡展開，看看具體能怎么使用或者玩出什么花活。
## 常用用法
既然是標(biāo)題是你所不知道的技巧與細(xì)節(jié)，那么比較常用的一些用法就不再贅述，通常我們見得比較多的 CSS 濾鏡用法有：
- 使用 `filter: blur()`生成毛玻璃效果
- 使用 `filter: drop-shadow()`生成整體陰影效果
- 使用 `filter: opacity()`生成透明度
如果對(duì)上面的技巧不是很了解，可以稍稍百度谷歌一下，下文將由淺及深，介紹一些不大常見的濾鏡的具體用法及一些小細(xì)節(jié)：
## contrast/brightness — hover 增亮圖片
通常頁(yè)面上的按鈕，都會(huì)有 hover/active 的顏色變化，以增強(qiáng)與用戶的交互。但是一些圖片展示，則很少有 hover 的交互，運(yùn)用` filter: contrast()`或者`filter: brightness()`可以在 hover 圖片的時(shí)候，調(diào)整圖片的對(duì)比圖或者亮度，達(dá)到聚焦用戶視野的目的。
`brightness表示亮度，contrast 表示對(duì)比度。`
當(dāng)然，這個(gè)方法同樣適用于按鈕，簡(jiǎn)單的 CSS 代碼如下：
```
.btn:hover,
.img:hover {
transition: filter .3s
filter:亮度(1.1)對(duì)比度(110%)；
}
```
## blur — 生成圖像陰影
通常而言，我們生成陰影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它們生成陰影是陰影只能是單色的。
有讀者同學(xué)會(huì)問了，你這么說，難道還可以生成漸變色的陰影不成？
額，當(dāng)然不行。
這個(gè)真不行，但是通過巧妙的利用 filter: blur
模糊濾鏡，我們可以假裝生成漸變色或者說是顏色豐富的陰影效果。
假設(shè)我們有下述這樣一張頭像圖片：
下面就利用濾鏡，給它添加一層與原圖顏色相仿的陰影效果，核心 CSS 代碼如下：
``
。avator {
相對(duì)位置:
background: url($img)不重復(fù)中心中心；
背景尺寸: 100% 100%；
``
``
:after {
content :“”；
position:絕對(duì)值；
top : 10%；
寬度:±100%；
height : 100%；
background: inherit
背景尺寸: 100% 100%；
filter:模糊(10px)亮度(80%)不透明度(. 8)；
z-index :-1；
}
}
``
看看效果:
！[](http://上傳-圖片。建設(shè)/上傳-圖片/8373224-7af75a4486f98a54.png？imageMogr 2/自動(dòng)定向/條帶%7CimageView2/2/w/1240)
其簡(jiǎn)單原理是使用偽元素生成與原始圖像大小相同的新圖像，并將其疊加在原始圖像下，然后使用濾鏡模糊濾鏡:模糊()
與其他亮度/對(duì)比度、透明度和其他濾鏡合作，創(chuàng)建一個(gè)虛幻的陰影，并將其偽裝成原始圖像的陰影效果。
嗯，最重要的是這句話:濾鏡:模糊(10px)亮度(80%)不透明度(. 8)；
.
代碼pendemo-filtercreate)
##模糊混合對(duì)比度產(chǎn)生融合效果
這是本文的重點(diǎn)。模糊濾鏡疊加對(duì)比度濾鏡產(chǎn)生的融合效果。讓你知道什么是CSS黑色技術(shù)！
分別取出兩個(gè)過濾器。他們的職能是:
1。filter: blur():在圖像上設(shè)置高斯模糊效果。
2。filter: contrast():調(diào)整圖像的對(duì)比度。
然而，當(dāng)它們“結(jié)合在一起”時(shí)，會(huì)有一種奇妙的融合現(xiàn)象。通過對(duì)比度濾波消除高斯模糊的模糊邊緣，通過高斯模糊實(shí)現(xiàn)融合效果。
讓我們看一個(gè)簡(jiǎn)單的例子:
！[微信圖片_ 201710131002608.gif] (http://上傳-圖片。建shu.io/upload _圖片/8373224-f58712a351cb8253.gif？imageMogr 2/自動(dòng)定向/剝離)
仔細(xì)觀察兩個(gè)圓圈相交的過程。當(dāng)邊緣相互接觸時(shí)，將產(chǎn)生邊界融合效應(yīng)。
上述效果的實(shí)現(xiàn)基于兩點(diǎn):
1。圖形在畫布背景上以濾鏡:對(duì)比度設(shè)置為動(dòng)畫()
2。要被動(dòng)畫化的圖形用過濾器: blur()設(shè)置(要被動(dòng)畫化的圖形的父元素需要用過濾器:對(duì)比度()設(shè)置)
畫布)
意味著上面兩個(gè)圓圈的運(yùn)動(dòng)背后實(shí)際上是一個(gè)疊加的對(duì)比度()和濾波器:
有一個(gè)大的白色背景，而這兩個(gè)圓是用filter: blur()設(shè)置的
，兩個(gè)條件是必不可少的。
當(dāng)然，背景顏色不一定是白色。我們稍微修改了上面的演示。簡(jiǎn)單示意圖如下:
！[](http://上傳-圖片。建設(shè)/上傳-圖片/8373224-ef2e140b3ac33409。巴布亞新幾內(nèi)亞？imageMogr 2/自動(dòng)定向/條帶%7CimageView2/2/w/1240)
燃燒的火焰
好吧，在介紹了上面的原理之后，讓我們來看看用這種效果產(chǎn)生的一些強(qiáng)大的CSS效果。其中，最驚人的是利用融合效應(yīng)產(chǎn)生火焰。這種效果最早是由作者中野裕介看到的:
！[微信圖片_ 20171013102804.gif] (http://上傳-圖片。建shu.io/Upload _圖片/8373224-28D 45081db917631.gif？imageMogr 2/自動(dòng)定向/剝離)
不要懷疑你的眼睛，上面的GIF效果是用純CSS實(shí)現(xiàn)的。
內(nèi)核或?yàn)V波器:對(duì)比度()
和濾波器:模糊()
一起使用，但實(shí)施過程也很有趣。我們需要用CSS畫一個(gè)火焰形狀。
火焰形狀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)對(duì)比度(30)；
}
``
看起來像這樣:
！[(http://上傳-圖片。建書。io/上傳-圖片/8373224-5f 0 b5 db 61eb 476 EC。png？imageMogr 2/自動(dòng)定向/條帶%7CimageView2/2/w/1240)
分解流程:
在純黑色背景上，你會(huì)得到上圖的效果。
這里會(huì)有一個(gè)大問題，添加濾鏡:模糊(20px)對(duì)比度(30)；
在
之后，為什么黑色和黃色之間會(huì)出現(xiàn)紅色邊框？
我在這里咨詢了幾位設(shè)計(jì)師和前端同事，我得到的答案可能是，兩個(gè)不同濾鏡的顏色值處理算法在邊界重疊以獲得另一種顏色。 (不一定準(zhǔn)確，請(qǐng)?jiān)u論)，嘗試在PS中恢復(fù)這種效果，但PS沒有對(duì)比度()過濾器，結(jié)果偏差相當(dāng)大。
好，繼續(xù)課文。接下來，我們只需要把火放在火里。
在這個(gè)分區(qū)內(nèi)，從下到上使用大量黑色圓圈，不規(guī)則地穿過火焰。由于過濾器的融合效果，產(chǎn)生火焰效果。為了便于理解，我將背景顏色切換為白色?；鹧鎰?dòng)畫的原理一目了然:
！[](http://上傳-圖片。建設(shè)/上傳-圖片/8373224-86 a5 F5 da 6a 95080 . gif？imageMogr 2/自動(dòng)定向/剝離)
##文本融合動(dòng)畫
此外，我們可以在動(dòng)畫制作過程中動(dòng)態(tài)更改元素濾鏡的濾鏡:模糊()
的價(jià)值。
使用這種方法，我們還可以設(shè)計(jì)一些文本融合效果:
！[](http://上傳-圖片。建設(shè)/上傳-圖片/8373224-b0725f40883e356e.gif？imageMogr 2/自動(dòng)定向/剝離)
！[](http://上傳-圖片。建設(shè). io/上傳-圖片/8373224-3a 91b 42e 02821添加. gif？imageMogr 2/自動(dòng)定向/剝離)
具體實(shí)施情況見下文:
Code Pendemo-Word動(dòng)畫|文字過濾器(https://codepen.io/Chokcoco/pen/jLjNRj)
##值得注意的細(xì)節(jié)
雖然動(dòng)畫很美，但在具體使用過程中仍有一些需要注意的地方:
1。CSS濾鏡可以同時(shí)為同一元素定義多個(gè)濾鏡，例如，濾鏡:對(duì)比度(150%)亮度(1.5)
，但不同順序的過濾器效果不同。
也就是說，使用:°對(duì)比度(150%)亮度(1.5)。
和濾波器:亮度(1.5)對(duì)比度(150%)
處理同一張圖片會(huì)產(chǎn)生不同的結(jié)果，因?yàn)闉V鏡的顏色值處理算法會(huì)按順序處理圖片。
2。過濾動(dòng)畫需要大量的計(jì)算和連續(xù)重繪頁(yè)面。這是一個(gè)非常消耗性能的動(dòng)畫。使用它時(shí)，你應(yīng)該注意場(chǎng)景。記住打開硬件加速，合理使用分層技術(shù)；
3。模糊()混合對(duì)比度()濾鏡效果，設(shè)置不同的顏色會(huì)產(chǎn)生不同的效果，這種顏色疊加的具體算法暫時(shí)不是很清楚，更好的使用方法是嘗試不同的顏色并觀察以獲得最佳效果；
4。CSS3過濾器的兼容性不是很好，但可以在移動(dòng)端正常使用。要獲得更準(zhǔn)確的兼容性列表，請(qǐng)選中“我可以使用嗎”。
福州友誠(chéng)互聯(lián)網(wǎng)，一家致力于福州網(wǎng)站建設(shè)的網(wǎng)站制作公司，為客戶提供小程序制作，促進(jìn)福州網(wǎng)絡(luò)全網(wǎng)推廣，準(zhǔn)確開發(fā)客戶。歡迎來到http://www.xingfubangke.cn
