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

毛玻璃效果

---

毛玻璃质感（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直接导出毛玻璃透视的图片，只能手工加了🤦‍♀️

另辟蹊径： 使用用SVG绘制路径，再利用clipPath剪切路径。（如果边界超出，可用加一个透明边界border: 1px solid transparent）

//css
.ban2 {
      position: absolute;
      top: 107px;
      right: 139px;
      z-index: 17;
       border: 1px solid transparent;//不加边界毛玻璃效果是个方块
       -webkit-clip-path: url(#banGlass);
       clip-path: url(#banGlass);
       backdrop-filter: saturate(180%) blur(2px);//毛玻璃效果
       background: linear-gradient(
         45deg,
         rgba(64, 140, 253, 0.12),
         rgba(146, 202, 255, 0.12)
       );
      animation: banImgAnim 2.5s infinite alternate linear;//无聊的起伏动画
    }
//html
//svg引用
<div class="ban2">
            <svg width="100%" height="100%" viewBox="0 0 228.64 220.15">
              <use xlink:href="#glassImg" />
            </svg>
</div>
//svg绘制
<svg width="100%" height="100%" viewBox="0 0 228.64 220.15">
        <defs id="glassImg">
          <clipPath id="banGlass">
            <linearGradient
              id="路径_10_"
              gradientUnits="userSpaceOnUse"
              x1="-847.1108"
              y1="651.968"
              x2="-847.1904"
              y2="651.165"
              gradientTransform="matrix(228.6432 0 0 -220.15 193813.2344 143552.0938)"
            >
              <stop offset="0" style="stop-color: #92caff" />
              <stop offset="1" style="stop-color: #408cfd" />
            </linearGradient>

            <polygon
              id="路径_1_"
              class="st5"
              points="84,0 198.4,44.8 232.3,154.9 152,220.1 37.6,175.3 3.7,65.3 "
            />
          </clipPath>
        </defs>
      </svg>

哦豁，完成！