使用 CSS 輕松構(gòu)建高級(jí)感拉滿的磨砂玻璃漸變背景

作者：SbCo 2022-01-07 07:35:28

開發(fā) 前端

本文就討論使用 CSS 如何制作如上所示磨砂(毛玻璃)質(zhì)感效果的漸變背景圖,如何借助 CSS-doodle 工具，批量產(chǎn)生該效果圖，并且附帶動(dòng)畫效果.

最近，我們內(nèi)部的一個(gè)低代碼平臺(tái)完工上線，它的首頁(yè)大概是這樣子(數(shù)據(jù)脫敏)：

當(dāng)然，這個(gè)不是項(xiàng)目不是本文的重點(diǎn)。主要看看這個(gè)頁(yè)面的背景，一個(gè)磨砂(毛玻璃)質(zhì)感效果的漸變背景圖，看上去是比較高級(jí)的。

剝離掉頁(yè)面的內(nèi)容元素，只剩下背景的話，大概是這樣：

一開始是打算切圖實(shí)現(xiàn)的，但是仔細(xì)一想，這個(gè)效果使用 CSS 其實(shí)也可以非常輕松制作出來。本文就討論討論：

使用 CSS 如何制作如上所示磨砂(毛玻璃)質(zhì)感效果的漸變背景圖
如何借助 CSS-doodle 工具，批量產(chǎn)生該效果圖，并且附帶動(dòng)畫效果

實(shí)現(xiàn)漸變圖

上述背景效果看似復(fù)雜，其實(shí)非常的簡(jiǎn)單。它就是：

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

在 CSS 中，也就是借助 background + backdrop-filter: blur() 即可實(shí)現(xiàn)。

去掉疊在上方的高斯模糊蒙版，背后的元素其實(shí)非常簡(jiǎn)單明了。可能就是只是這樣：

這里簡(jiǎn)單列下代碼，我們使用了 3 個(gè) div 實(shí)現(xiàn)了 3 個(gè)漸變圖，每個(gè)圖形再使用 clip-path 隨機(jī)裁剪成不規(guī)則的多邊形：

<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 實(shí)現(xiàn)高斯模糊蒙版

接下來，這一步最為關(guān)鍵，就是使用 backdrop-filter 實(shí)現(xiàn)高斯模糊蒙版。疊在上述幾個(gè)元素上方即可，最關(guān)鍵的一行代碼 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; 
    } 
}

這樣，我們就實(shí)現(xiàn)了如上圖所示的毛玻璃質(zhì)感效果的漸變背景圖：

錄制的 Gif 圖看上去有點(diǎn)糊，你可以戳這里點(diǎn)進(jìn) DEMO 查看 -- CodePen Demo -- Frosted glass background effect[1]

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

借助 CSS-doodle 工具，批量產(chǎn)生該效果

簡(jiǎn)單了解了原理之后，我們就可以借助 CSS-doodle 嘗試批量來生成這個(gè)效果了。

CSS-doodle 它是一個(gè)基于 Web-Component 的庫(kù)。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁(yè)面，并且提供各種便捷的指令及函數(shù)(隨機(jī)、循環(huán)等等)，讓我們能通過一套規(guī)則，得到不同 CSS 效果。感興趣的可以猛擊官網(wǎng)了解 -- CSS-doodle[3]

代碼非常簡(jiǎn)單，也非常好理解，就是隨機(jī)場(chǎng)景不同尺寸、不同定位、不同顏色、不同形式的幾個(gè)圖形：

<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>

上述代碼會(huì)隨機(jī)生成這樣的圖案(GIF 看不出鼠標(biāo)的點(diǎn)擊效果，每次切換是我點(diǎn)擊頁(yè)面進(jìn)行的手動(dòng)切換)：

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

如果需求，配合上 hue-rotate 及簡(jiǎn)單的位移，我們甚至可以讓這個(gè)漸變背景動(dòng)畫動(dòng)起來，更加生動(dòng)些：

<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>