“我要个六边形毛玻璃效果”

毛玻璃效果

毛玻璃质感（Glassmorphism）：本质上是模糊，上方是带有透明度的遮罩模糊，下方元素像有一层蒙层。通透轻盈，呼吸感强，具有虚实结合的美感。

那如何实现呢？简单，一行代码

// CSS 
backdrop-filter:blur(12px);

CSS滤镜backdrop-filter属性

• blur():模糊；
• brightness():亮度；
• contrast():对比度
• drop-shadow():投影
• grayscale():灰度；
• hue-rotate():色调变化；
• invert():反向；
• opacity():透明度；
• saturate():饱和度；
• sepia():褐色；

既然都是滤镜，那么backdrop-filter和filter有什么区别呢？

• filter：该属性将模糊或颜色偏移等图形效果应用于元素。
• backdrop-filter：该属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素。

除此之外filter和backdrop-filter所支持的属性完全一致。

因此，如果模糊效果使用filter中的blur()，则会使其子元素全部模糊。

兼容性：

UI：导航栏，卡片，小按钮，背景全部给我安排上！

异形毛玻璃

UI：把图片上的小玻璃统统加上毛玻璃！
我：自己切去！

由于有位移动画，无法让UI直接导出毛玻璃透视的图片，只能手工加了