妙用 CSS 構建花式透視背景效果
本文將介紹一種巧用 background
配合 backdrop- filter
來構建有趣的透視背景效果的方式。
本技巧源自於一名羣友的提問,如何構建如 ElementUI[1] 文檔的一種頂欄背景特效,看看效果:
仔細看,在頁面的的滾動過程中,頂欄的背景不是白色的,也不是毛玻璃效果,而是能夠將背景顆粒化:
準確而言,是一種基於顆粒化的毛玻璃效果,元素首先是被顆粒化,其次,元素的邊緣也是在一定程度上被虛化了。那麼,我們該如何實現這個效果呢?
需求拆解
上述效果看似神奇,其實原理也非常簡單。主要就是顆粒化的背景 background 加上backdrop-filter: blur()
即可。
首先,我們需要實現顆粒背景。
我們利用 background
實現這樣一個背景:
<div></div>
div {
background: radial-gradient(transparent, #000 20px);
background-size: 40px 40px;
}
從透明到黑色的徑向漸變效果如下:
需要注意的是,圖裏的白色部分其實透明的,可以透出背後的背景。此時,如果背景後面有元素,效果就會是這樣:
好,我們將 background: radial-gradient(transparent, #000 20px)
中的黑色替換成白色,效果如下:
這裏爲了展示原理,每個徑向漸變的圓設置的比較大,我們把它調整回正常大小:
div {
background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
background-size: 4px 4px;
}
這樣,我們就成功的將背景顆粒化:
當然,此時透出的背景看上去非常生硬,也不美觀,所以,我們還需要 backdrop-filter: blur()
,我們加上一個試試看:
div {
background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px);
background-size: 4px 4px;
backdrop-filter: blur(10px);
}
這樣,我們就實現了一開始所展示的效果:
這裏需要注意的是,background-size
的大小控制,和不同的 backdrop-filter: blur(10px)
值,都會影響效果。
完整的 DEMO,你可以戳這裏:CodePen Demo -- Mask Filter[2]
當然,掌握了這個技巧之後,我們可以嘗試替換掉 background: radial-gradient()
圖形,及改變 background-size
,嘗試各種不同形狀的透視背景。簡單舉幾個例子:
div {
background: linear-gradient(45deg, transparent, #fff 4px);
background-size: 6px 6px;
backdrop-filter: saturate(50%) blur(4px);
}
這裏使用了 linear-gradient()
替換了 radila-gradient()
:
最後
一個非常小的技巧,運用在恰當的地方可以很好的提升頁面的質感,你學會了嗎?
本文到此結束,希望對你有幫助 :)
如果還有什麼疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。
參考資料
[1]
ElementUI: https://element-plus.gitee.io/zh-CN/
[2]
CodePen Demo -- Mask Filter: https://codepen.io/Chokcoco/pen/LYdWPbz
[3]
Github -- iCSS: https://github.com/chokcoco/iCSS
iCSS 前端趣聞 不止於 CSS,不止於前端。關注回覆 “css”,入羣參與大前端技術討論,答疑解惑,共同成長進步。
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/eHwFbX_C-NjV3XRNORspew