vue3封装仿macOs的液态玻璃组件

参考链接 效果如下：

原理分析

1. 模糊背景
   在 .liquidGlass-effect 元素上使用了 backdrop-filter: blur(3px);，它会将该元素后面的内容（即背景图片）进行模糊处理，模拟玻璃的半透明和模糊视觉。
2. SVG滤镜扭曲
   通过 filter: url(#glass-distortion); 应用自定义 SVG 滤镜。
   这个滤镜由 <feTurbulence> 生成噪声纹理，后续 <feDisplacementMap> 用噪声对原图进行扭曲，制造液态玻璃的流动感。
3. 高光和光泽
   .liquidGlass-shine 使用 box-shadow 内阴影，模拟玻璃表面反光。
4. 色彩和透明度叠加
   .liquidGlass-tint 用半透明白色背景（rgba(255,255,255,0.25)），让玻璃看起来更有层次和真实感。
5. 分层结构
   通过多个绝对定位的 div 层叠，分别负责模糊、色彩、光泽和内容，最终组合出玻璃质感。

vue3组件封装

基于上面的代码封装一个vue3的组件LiquidGlass.vue：

<template>
  <div>
    <svg style="display: none">
      <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
        <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17" result="turbulence" />
        <feComponentTransfer in="turbulence" result="mapped">
          <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
          <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
          <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
        </feComponentTransfer>
        <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />
        <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100"
          lighting-color="white" result="specLight">
          <fePointLight x="-200" y="-200" z="300" />
        </feSpecularLighting>
        <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />
        <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />
      </filter>
    </svg>

    <div class="liquidGlass-wrapper">
      <div class="liquidGlass-effect"></div>
      <div class="liquidGlass-tint"></div>
      <div class="liquidGlass-shine"></div>
      <div class="liquidGlass-text">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  inheritAttrs: false
})
const { borderRadius = '12px' } = defineProps<{
  borderRadius?: string
}>()
</script>

<style scoped>
.liquidGlass-wrapper {
  position: relative;
  display: flex;
  overflow: hidden;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: v-bind(borderRadius);
}

.liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(3px);
  filter: url(#glass-distortion);
  overflow: hidden;
  isolation: isolate;
}

.liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
}

.liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
}

.liquidGlass-text {
  z-index: 3;
}
</style>

使用方式：

<template>
  <div class="container">
    <liquid-glass border-radius="12px">
      <div class="w-[400px] h-[200px] text-center text-white p-4">2333</div>
    </liquid-glass>
  </div>
</template>

<script setup lang="ts">
import LiquidGlass from '@/components/LiquidGlass.vue'


</script>

<style scoped>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: url("https://raw.githubusercontent.com/lucasromerodb/liquid-glass-effect-macos/refs/heads/main/assets/flowers.jpg") center center;
  background-size: 400px;
  font-family: sans-serif;
  font-weight: 300;
  animation: moveBackground 360s linear infinite;
}


@keyframes moveBackground {
  from {
    background-position: 0% 0%;
  }

  to {
    background-position: 0% -1000%;
  }
}
</style>