likes
comments
collection

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

作者站长头像
站长
· 阅读数 13

毛玻璃效果


毛玻璃质感(Glassmorphism):本质上是模糊,上方是带有透明度的遮罩模糊,下方元素像有一层蒙层。通透轻盈,呼吸感强,具有虚实结合的美感。 “我要个六边形毛玻璃效果”

那如何实现呢?简单,一行代码

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

CSS滤镜backdrop-filter属性

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

既然都是滤镜,那么backdrop-filterfilter有什么区别呢?

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

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

除此之外filterbackdrop-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>

哦豁,完成!

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