CSS 穿牆術!太強了
大家好,我是零一,今天給大家分享 CSS 中一個神奇的屬性:filter[1],爲什麼說它神奇?正如我標題所說的,我突然發現它能幫我們輕鬆實現 穿牆特效,類似這種的👇
gif 錄製略有失真
看起來就跟我們在科幻電影裏看到的經過一個穿梭門時的效果一樣,真的很酷!然而這個效果對於開發者來說毫無難度,因爲只設置了兩個屬性
從這個例子引出的 CSS 中超級牛逼的 filter
屬性,到底還有哪些牛逼屬性呢?一起來了解一下!
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%);
這些屬性既可以單獨用,也可以組合使用,例如:
filter: contrast(175%) brightness(3%);
ps: 屬性組合使用時可能有奇效!
案例
本文就介紹一些神奇的案例吧,大概率不會講清楚每個屬性的原理,因爲我也不是很清楚
blur
blur
屬性平時用的還是挺多的,主要是做高斯模糊的,最近幾年特別火的毛玻璃效果就可以通過這個實現:
<style>
.blur {
width: 400px;
height: 400px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.5);
position: relative;
}
.blur::before {
content: "";
position: absolute;
inset: 0 0 0 0;
background: inherit;
filter: blur(10px);
}
</style>
<div class="blur"/>
效果如下:
毛玻璃
其實這種毛玻璃效果並不是太好,可能達不到 UI 的要求,想要效果好的毛玻璃,可以用 backdrop-filter
實現,但後者沒有前者兼容性好
blur
backdrop-filter
brightness
brightness
屬性是用來修改亮度的。值可以是百分比,也可以是數值(0.5 = 50%
),默認值是 1
,但不能是負數。當值越接近 0
,畫面越黑,當等於 0
時,整個畫面幾乎就成純黑的了;值理論上可以趨於無限大,當大到一定值時,畫面就幾乎成純白了
能用來幹啥呢?有一個非常常見的效果想必大家都看過:
不知道你們當時看到這個效果時,腦海裏有沒有想過該如何實現?哈哈,其實一個屬性就夠了!
<style>
.brightness {
width: 100px;
height: 100px;
border-radius: 8px;
cursor: pointer;
background: #333;
font-size: 45px;
}
.brightness:hover .icon {
filter: brightness(1.3);
}
</style>
<div class="brightness">
<img src="apple.png" class="icon"/>
</div>
contrast
contrast
可以用來調整圖像的對比度,這個詞有些專業,設計師是經常接觸的,用簡單易懂的話來講,對比度 = 圖像中 最白的色值 / 最黑的色值,按照這個公式又可以理解爲:
-
對比度越大,白色越強 (亮)、黑色越弱 (暗),圖像越白;
-
對比度越小,白色越弱 (暗)、黑色越強 (白),圖像越黑;
contrast()
的值可以寫百分比,也可以寫數值(0.5 = 50%
),默認值是 1
,該值可以無限大,那樣畫面就會更亮,但不能爲負數
簡單瞭解了概念,實戰一下看看效果:
可以看到,值大於 0 且小於 1 時,畫面被蒙上了灰色的蒙層;值大於 1 時,畫面中很多光亮元素更亮了,而很多暗黑元素就更黑了
這個屬性看起來沒啥用,既不能讓圖像更有畫面感,又不能讓圖像更精緻,是吧?我也這麼覺得!但要知道 contrast
和 brightness
兩個屬性跟 UI 設計是強相關的,這讓我想到了 PS 裏的一個圖像調整,我切換到英文版的 PS 給大家看看:
正好就對應了 PS 中圖像調整的兩個設置屬性值
大家都知道,在講到 前端性能優化 時,其實能夠感知到的最大優化就是在於 圖片,其它的優化點的 ROI 幾乎都沒圖像優化來得高
那麼有沒有可能:用 PS 降低圖像的亮度、對比度,以此來降低圖片的質量,再用 contrast
和 brightness
來提升圖像的亮度、對比度,以此來恢復圖片原有效果呢?
先來看看降低圖片的亮度和對比度能否降低質量。爲此我特地找了個高達 4M
的高清圖:
高清原圖
然後再用 PS 適當降低其亮度和對比度,一定要選擇 "舊版",因爲只有這種模式下的亮度、對比度的優化規則跟我們 CSS 的類似
看一下修改後的圖片大小
對比度 -55
可以看到隨便調整了一些屬性,圖片大小大約減少了 1M
那能否再恢復成原來圖片的效果和質量呢?
在控制檯微調屬性:
filter: brightness(1.2) contrast(1.7);
得到結果如下:
可以看到幾乎是沒啥差別,而且肉眼看上去圖像的損耗我覺得也是可接受範圍內的,反而覺得還比原圖更有畫面感,可能這就是對比度的魔力吧!
這僅僅是降低了一點點對比度的效果,圖片體積下降了 25%
左右,先不討論到底能夠極致優化多少圖片的大小,但至少 25%
的優化空間已經很 nice 了
另外上文提到了 filter 的有些屬性組合使用會有奇效,其中就包括 contrast
,它和 blur
一起用就能實現本文開頭提到的 穿牆效果
<style>
body {
width: 100vw;
background-color: black;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100px;
height: 100px;
border: 4px solid aquamarine;
background-color: #222;
overflow: hidden;
border-radius: 50%;
font-size: 36px;
filter: blur(6px) contrast(6); /* 主要靠這行代碼 */
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 1em;
height: 1em;
transform: translate(0px, 0px);
background-color: aquamarine;
animation: move 2s linear infinite;
}
@keyframes move {
from {
transform: translateX(-100px);
}
to {
transform: translateX(100px);
}
}
</style>
<div class="container">
<div class="box"></div>
</div>
這樣就實現了:
再次感嘆 CSS 牛逼
drop-shadow
drop-shadow
能夠給圖像設置陰影效果,使用方式其實跟 box-shadow
一樣,區別就是:drop-shadow
能夠識別圖像中的透明元素,給圖像內容的每個邊打上引用;box-shadow
只能給元素整個輪廓加陰影效果。用一張圖來展示它倆的區別:
grayscale
國內但凡遇上一些社會性的天災人禍,影響比較大的,很多網站都會將頁面置灰,表示哀悼。那時候有很多人在分析 "網頁置灰" 這個功能該如何實現,其實用 filter 的 grayscale
實現是最簡單快速的了
咱們隨便找個網頁,就拿網易雲舉例吧,先看正常頁面的效果:
我們給它的 body
加上置灰屬性:
body {
filter: grayscale(1);
}
頁面置灰的效果就完成了
hue-rotate
hue-rotate
用於調整元素的色相,色相的概念可以在 HSL 中看到,即:
-
H:色相
-
S:飽和度
-
L:亮度
那改變色相就如下圖的過程一樣:
hue-rotate
的值的單位是角度(deg
),每 360deg
一個變換週期
這有啥用呢?直播間的點贊,狂按時會有很多的漂浮物出來,比如:
我們可以通過修改 filter: hue-rotate(0deg)
的值來改變每個愛心的顏色
這裏我又想到了另外一個 CSS 屬性,那就是 counter-reset
,用其初始化一個計數器,然後用 counter
函數拿到當前計數賦值給 hue-rotate
,這樣是不是就能實現顏色自動變化了?(當然了我還沒實驗過,只是在寫這篇文章時的一些想法)
invert
invert
是用來翻轉圖像的,其實我也無法很好地解釋什麼叫翻轉圖像,不過可以借另一個例子來給大家解釋
熱成像
圖中左側是抖音最近很火的熱成像特效,可以把拍到的東西都以熱成像的效果呈現出來,右側是我們加了 filter: invert(1)
實現的效果,差不多可以看清熱成像之前的樣子是如何的
所以,相信大家都知道了,invert
跟我們手機裏的 顏色翻轉 的功能是一模一樣的,給大家演示一下
有時候用上 invert
這個濾鏡會有意想不到的效果哦,例如我之前的文章裏,給我自己畫的抖音 Logo 加了翻轉效果,又成了一個嶄新的 Logo,話說抖音不打算請我去設計一下麼?
其餘
其它未提到的屬性,要不就是比較簡單,一看就知道怎麼用了;要不就是平時不怎麼用,比較冷門;大家感興趣的可以去 MDN 自行查看,或者自己試一下
最後
本文由一個比較有意思的效果開頭,然後去了解了相關的其它屬性,從中又延伸出來很多其它知識點,爆出了很多的想法和思考。這就是我自己的完整思路,所以寫文章出來也是這個順序和邏輯
完了,我是切圖仔的身份已經沒法隱藏了,本文好多地方需要用到 PS,得虧還記得些內容,不然這篇文章都寫不出來
希望本文對大家有所幫助~ 我在用心寫文章,希望大家也不要吝嗇你們的贊👍🏻哦~
我是零一,分享技術,不止前端!下期見~
參考資料
[1] filter: https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/cg_73_H23aN1AKqfrgvWFA