妙用濾鏡構建高階感拉滿的磨砂玻璃漸變背景

chokcoco發表於2022-01-26

最近，我們內部的一個低程式碼平臺完工上線，它的首頁大概是這樣子（資料脫敏）：

當然，這個不是專案不是本文的重點。主要看看這個頁面的背景，一個磨砂（毛玻璃）質感效果的漸變背景圖，看上去是比較高階的。

剝離掉頁面的內容元素，只剩下背景的話，大概是這樣：

一開始是打算切圖實現的，但是仔細一想，這個效果使用 CSS 其實也可以非常輕鬆製作出來。本文就討論討論：

  1. 使用 CSS 如何製作如上所示磨砂（毛玻璃）質感效果的漸變背景圖
  2. 如何藉助 CSS-doodle 工具，批量產生該效果圖，並且附帶動畫效果

實現漸變圖

上述背景效果看似複雜，其實非常的簡單。它就是：

多塊不規則漸變背景 + 高斯模糊蒙版

在 CSS 中，也就是藉助 background + backdrop-filter: blur() 即可實現。

去掉疊在上方的 高斯模糊蒙版，背後的元素其實非常簡單明瞭。可能就是隻是這樣：

這裡簡單列下程式碼，我們使用了 3 個 div 實現了 3 個漸變圖，每個圖形再使用 clip-path 隨機裁剪成不規則的多邊形：

<div class="g-bg">
    <div class="g-polygon g-polygon-1"></div>
    <div class="g-polygon g-polygon-2"></div>
    <div class="g-polygon g-polygon-3"></div>
</div>
.g-polygon {
    position: absolute;
    opacity: .5;
}
.g-polygon-1 {
    // 定位程式碼，容器高寬隨意
    background: #ffee55;
    clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
}

.g-polygon-2 {
    // 定位程式碼，容器高寬隨意
    background: #E950D1;
    clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
}

.g-polygon-3 {
    // 定位程式碼，容器高寬隨意
    background: rgba(87, 80, 233);
    clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}

使用 backdrop-filter 實現高斯模糊蒙版

接下來，這一步最為關鍵，就是使用 backdrop-filter 實現高斯模糊蒙版。疊在上述幾個元素上方即可，最關鍵的一行程式碼 backdrop-filter: blur(150px)

.g-bg::before {
        content: "";
        position: fixed;
        top: 0; left: 0; bottom: 0; right: 0;
        backdrop-filter: blur(150px);
        z-index: 1;
    }
}

這樣，我們就實現瞭如上圖所示的毛玻璃質感效果的漸變背景圖：

錄製的 Gif 圖看上去有點糊，你可以戳這裡點進 DEMO 檢視 -- CodePen Demo -- Frosted glass background effect

注意，這裡使用的是 backdrop-filter: blur()，而不是 filter: blur()，如果你對這兩個濾鏡是使用選擇還有所疑惑，可以看看的我的這篇文章講解 -- 深入探討 filter 與 backdrop-filter 的異同

藉助 CSS-doodle 工具，批量產生該效果

簡單瞭解了原理之後，我們就可以藉助 CSS-doodle 嘗試批量來生成這個效果了。

CSS-doodle 它是一個基於 Web-Component 的庫。允許我們快速的建立基於 CSS Grid 佈局的頁面，並且提供各種便捷的指令及函式（隨機、迴圈等等），讓我們能通過一套規則，得到不同 CSS 效果。感興趣的可以猛擊官網瞭解 -- CSS-doodle

程式碼非常簡單，也非常好理解，就是隨機場景不同尺寸、不同定位、不同顏色、不同形式的幾個圖形：

<css-doodle>
    :doodle {
        @grid: 1x8 / 100vmin;
    }
    @place-cell: center;
    width: @rand(40vmin, 80vmin);
    height: @rand(40vmin, 80vmin);
    transform: translate(@rand(-200%, 200%), @rand(-60%, 60%)) scale(@rand(.8, 1.8)) skew(@rand(45deg));
    clip-path: polygon(
      @r(0, 30%) @r(0, 50%), 
      @r(30%, 60%) @r(0%, 30%), 
      @r(60%, 100%) @r(0%, 50%), 
      @r(60%, 100%) @r(50%, 100%), 
      @r(30%, 60%) @r(60%, 100%),
      @r(0, 30%) @r(60%, 100%)
    );
    background: @pick(#f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4, #2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf);
    opacity: @rand(.3, .8);
</css-doodle>

上述程式碼會隨機生成這樣的圖案（GIF 看不出滑鼠的點選效果，每次切換是我點選頁面進行的手動切換）：

好，配合上蒙版，再看看效果，我們已經能夠批量的去生成上述的背景效果了：

如果需求，配合上 hue-rotate 及簡單的位移，我們甚至可以讓這個漸變背景動畫動起來，更加生動些：

<css-doodle>
    // 同上...
    position: relative;
    top: @rand(-80%, 80%);
    left: @rand(-80%, 80%);
    animation: colorChange @rand(6.1s, 16.1s) infinite @rand(-.5s, -2.5s) linear alternate;
  
  @keyframes colorChange {
    100% {
      left: 0;
      top: 0;
      filter: hue-rotate(360deg);
    }
  }
</css-doodle>

這樣，我們就得到了帶動畫的毛玻璃漸變背景：

GIF 截圖效果較差，完整的程式碼及效果體驗你可以猛擊這裡 -- CodePen Demo -- CSS-doodle Pure CSS Background Effect

最後

好了，本文到此結束，希望本文對你有所幫助 :)

想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的公眾號 -- iCSS前端趣聞 ?

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

相關文章