CSS 穿牆術！太強了

零一發表於2022-05-24
CSS

大家好，我是零一，今天給大家分享 CSS 中一個神奇的屬性：filter，為什麼說它神奇？正如我標題所說的，我突然發現它能幫我們輕鬆實現 穿牆特效，類似這種的?

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，得虧還記得些內容，不然這篇文章都寫不出來

希望本文對大家有所幫助~ 我在用心寫文章，希望大家也不要吝嗇你們的贊??哦~

我是零一，分享技術，不止前端！下期見~

相關文章