在蘋果的官網上看到看到一個懸浮選單的毛玻璃效果

被這種效果給吸引到了,深入原始碼后發現只通過兩個css屬性就能實作該效果,
蘋果網站地址https://www.apple.com.cn/macos/big-sur/,有興趣可以上去看下,上面還有一些更有意思的特效,不得不說蘋果的頁面體驗是真的做得好,有興趣可以研究下,
關鍵css屬性
background: rgba(29,29,31,0.72);
加一個透明度為0.72的背景顏色
backdrop-filter: saturate(180%) blur(20px);
backdrop-filter給元素后方加過濾器,而不是元素,這里加了兩個過濾器
saturate和blur
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/260536.html
標籤:其他
上一篇:程式員的表白文,加點不一樣的料!
