建站
咨詢
售后
建站咨詢
新聞中心
gif錄制略有失真
看起來(lái)就跟我們?cè)诳苹秒娪袄锟吹降慕?jīng)過(guò)一個(gè)穿梭門時(shí)的效果一樣，真的很酷！然而這個(gè)效果對(duì)于開發(fā)者來(lái)說(shuō)毫無(wú)難度，因?yàn)橹辉O(shè)置了兩個(gè)屬性
從這個(gè)例子引出的 CSS 中超級(jí)牛逼的 ??filter?? 屬性，到底還有哪些牛逼屬性呢？一起來(lái)了解一下！
filter 支持的屬性
借用了一下 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%);
這些屬性既可以單獨(dú)用，也可以組合使用，例如：
filter: contrast(175%) brightness(3%);
ps: 屬性組合使用時(shí)可能有奇效！
案例
本文就介紹一些神奇的案例吧，大概率不會(huì)講清楚每個(gè)屬性的原理，因?yàn)槲乙膊皇呛芮宄?/p>
blur
??blur?? 屬性平時(shí)用的還是挺多的，主要是做高斯模糊的，最近幾年特別火的毛玻璃效果就可以通過(guò)這個(gè)實(shí)現(xiàn)：
效果如下：
毛玻璃
其實(shí)這種毛玻璃效果并不是太好，可能達(dá)不到 UI 的要求，想要效果好的毛玻璃，可以用 ??backdrop-filter?? 實(shí)現(xiàn)，但后者沒有前者兼容性好
blur
backdrop-filter
brightness
??brightness??? 屬性是用來(lái)修改亮度的。值可以是百分比，也可以是數(shù)值（??0.5 = 50%???），默認(rèn)值是 ??1???，但不能是負(fù)數(shù)。當(dāng)值越接近 ??0???，畫面越黑，當(dāng)?shù)扔???0?? 時(shí)，整個(gè)畫面幾乎就成純黑的了；值理論上可以趨于無(wú)限大，當(dāng)大到一定值時(shí)，畫面就幾乎成純白了
能用來(lái)干啥呢？有一個(gè)非常常見的效果想必大家都看過(guò)：
不知道你們當(dāng)時(shí)看到這個(gè)效果時(shí)，腦海里有沒有想過(guò)該如何實(shí)現(xiàn)？哈哈，其實(shí)一個(gè)屬性就夠了！
contrast
??contrast?? 可以用來(lái)調(diào)整圖像的對(duì)比度，這個(gè)詞有些專業(yè)，設(shè)計(jì)師是經(jīng)常接觸的，用簡(jiǎn)單易懂的話來(lái)講，對(duì)比度 = 圖像中 最白的色值 / 最黑的色值，按照這個(gè)公式又可以理解為：
- 對(duì)比度越大，白色越強(qiáng)(亮)、黑色越弱(暗)，圖像越白；
- 對(duì)比度越小，白色越弱(暗)、黑色越強(qiáng)(白)，圖像越黑；
??contrast()??? 的值可以寫百分比，也可以寫數(shù)值（??0.5 = 50%???），默認(rèn)值是 ??1??，該值可以無(wú)限大，那樣畫面就會(huì)更亮，但不能為負(fù)數(shù)
簡(jiǎn)單了解了概念，實(shí)戰(zhàn)一下看看效果：
可以看到，值大于 0 且小于 1 時(shí)，畫面被蒙上了灰色的蒙層；值大于 1 時(shí)，畫面中很多光亮元素更亮了，而很多暗黑元素就更黑了
這個(gè)屬性看起來(lái)沒啥用，既不能讓圖像更有畫面感，又不能讓圖像更精致，是吧？我也這么覺得！但要知道 ??contrast??? 和 ??brightness?? 兩個(gè)屬性跟 UI 設(shè)計(jì)是強(qiáng)相關(guān)的，這讓我想到了 PS 里的一個(gè)圖像調(diào)整，我切換到英文版的 PS 給大家看看：
正好就對(duì)應(yīng)了 PS 中圖像調(diào)整的兩個(gè)設(shè)置屬性值
大家都知道，在講到 前端性能優(yōu)化 時(shí)，其實(shí)能夠感知到的最大優(yōu)化就是在于 圖片，其它的優(yōu)化點(diǎn)的 ROI 幾乎都沒圖像優(yōu)化來(lái)得高
那么有沒有可能：用 PS 降低圖像的亮度、對(duì)比度，以此來(lái)降低圖片的質(zhì)量，再用 ??contrast??? 和 ??brightness?? 來(lái)提升圖像的亮度、對(duì)比度，以此來(lái)恢復(fù)圖片原有效果呢？
先來(lái)看看降低圖片的亮度和對(duì)比度能否降低質(zhì)量。為此我特地找了個(gè)高達(dá) ??4M?? 的高清圖：
高清原圖
然后再用 PS 適當(dāng)降低其亮度和對(duì)比度，一定要選擇 "舊版"，因?yàn)橹挥羞@種模式下的亮度、對(duì)比度的優(yōu)化規(guī)則跟我們 CSS 的類似
看一下修改后的圖片大小
對(duì)比度 -55
可以看到隨便調(diào)整了一些屬性，圖片大小大約減少了 ??1M??
那能否再恢復(fù)成原來(lái)圖片的效果和質(zhì)量呢？
在控制臺(tái)微調(diào)屬性：
filter: brightness(1.2) contrast(1.7);
得到結(jié)果如下：
可以看到幾乎是沒啥差別，而且肉眼看上去圖像的損耗我覺得也是可接受范圍內(nèi)的，反而覺得還比原圖更有畫面感，可能這就是對(duì)比度的魔力吧！
這僅僅是降低了一點(diǎn)點(diǎn)對(duì)比度的效果，圖片體積下降了 ??25%??? 左右，先不討論到底能夠極致優(yōu)化多少圖片的大小，但至少 ??25%?? 的優(yōu)化空間已經(jīng)很 nice 了
另外上文提到了 filter 的有些屬性組合使用會(huì)有奇效，其中就包括 ??contrast???，它和 ??blur?? 一起用就能實(shí)現(xiàn)本文開頭提到的 穿墻效果
這樣就實(shí)現(xiàn)了：
再次感嘆 CSS 牛逼
drop-shadow
??drop-shadow??? 能夠給圖像設(shè)置陰影效果，使用方式其實(shí)跟 ??box-shadow??? 一樣，區(qū)別就是：??drop-shadow??? 能夠識(shí)別圖像中的透明元素，給圖像內(nèi)容的每個(gè)邊打上引用；??box-shadow?? 只能給元素整個(gè)輪廓加陰影效果。用一張圖來(lái)展示它倆的區(qū)別：
grayscale
國(guó)內(nèi)但凡遇上一些社會(huì)性的天災(zāi)人禍，影響比較大的，很多網(wǎng)站都會(huì)將頁(yè)面置灰，表示哀悼。那時(shí)候有很多人在分析 "網(wǎng)頁(yè)置灰" 這個(gè)功能該如何實(shí)現(xiàn)，其實(shí)用 filter 的 ??grayscale?? 實(shí)現(xiàn)是最簡(jiǎn)單快速的了
咱們隨便找個(gè)網(wǎng)頁(yè)，就拿網(wǎng)易云舉例吧，先看正常頁(yè)面的效果：
我們給它的 ??body?? 加上置灰屬性：
body {
filter: grayscale(1);
}頁(yè)面置灰的效果就完成了
hue-rotate
??hue-rotate?? 用于調(diào)整元素的色相，色相的概念可以在 HSL 中看到，即：
- H：色相
- S：飽和度
- L：亮度
那改變色相就如下圖的過(guò)程一樣：
??hue-rotate??? 的值的單位是角度（??deg???），每 ??360deg?? 一個(gè)變換周期
這有啥用呢？直播間的點(diǎn)贊，狂按時(shí)會(huì)有很多的漂浮物出來(lái)，比如：
我們可以通過(guò)修改 ??filter: hue-rotate(0deg)?? 的值來(lái)改變每個(gè)愛心的顏色
這里我又想到了另外一個(gè) CSS 屬性，那就是 ??counter-reset???，用其初始化一個(gè)計(jì)數(shù)器，然后用 ??counter??? 函數(shù)拿到當(dāng)前計(jì)數(shù)賦值給 ??hue-rotate??，這樣是不是就能實(shí)現(xiàn)顏色自動(dòng)變化了？（當(dāng)然了我還沒實(shí)驗(yàn)過(guò)，只是在寫這篇文章時(shí)的一些想法）
invert
??invert?? 是用來(lái)翻轉(zhuǎn)圖像的，其實(shí)我也無(wú)法很好地解釋什么叫翻轉(zhuǎn)圖像，不過(guò)可以借另一個(gè)例子來(lái)給大家解釋
熱成像
圖中左側(cè)是抖音最近很火的熱成像特效，可以把拍到的東西都以熱成像的效果呈現(xiàn)出來(lái)，右側(cè)是我們加了 ??filter: invert(1)?? 實(shí)現(xiàn)的效果，差不多可以看清熱成像之前的樣子是如何的
所以，相信大家都知道了，??invert?? 跟我們手機(jī)里的 顏色翻轉(zhuǎn) 的功能是一模一樣的，給大家演示一下
有時(shí)候用上 ??invert??? 這個(gè)濾鏡會(huì)有意想不到的效果哦，例如我??之前的文章??里，給我自己畫的抖音Logo加了翻轉(zhuǎn)效果，又成了一個(gè)嶄新的 Logo，話說(shuō)抖音不打算請(qǐng)我去設(shè)計(jì)一下么？
其余
其它未提到的屬性，要不就是比較簡(jiǎn)單，一看就知道怎么用了；要不就是平時(shí)不怎么用，比較冷門；大家感興趣的可以去 MDN 自行查看，或者自己試一下
最后
本文由一個(gè)比較有意思的效果開頭，然后去了解了相關(guān)的其它屬性，從中又延伸出來(lái)很多其它知識(shí)點(diǎn)，爆出了很多的想法和思考。這就是我自己的完整思路，所以寫文章出來(lái)也是這個(gè)順序和邏輯
完了，我是切圖仔的身份已經(jīng)沒法隱藏了，本文好多地方需要用到 PS，得虧還記得些內(nèi)容，不然這篇文章都寫不出來(lái)
希望本文對(duì)大家有所幫助~
當(dāng)前文章：CSS穿墻術(shù)！太強(qiáng)了
當(dāng)前鏈接：http://www.dlmjj.cn/article/dpsdpeo.html
