当前位置：首页 > VUE

vue实现玻璃效果

2026-02-17 08:04:42VUE

Vue 实现玻璃效果（毛玻璃/磨砂玻璃）

玻璃效果（Frosted Glass）主要通过 CSS 的 backdrop-filter 属性实现，结合 Vue 的动态样式绑定能力，可以灵活控制效果强度、透明度等参数。

基础实现

在 Vue 组件的样式中直接定义玻璃效果类：

vue实现玻璃效果

.glass-effect {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

模板中应用样式：

vue实现玻璃效果

<template>
  <div class="glass-effect">
    <!-- 内容区域 -->
  </div>
</template>

动态参数控制

通过 Vue 的响应式数据动态调整效果参数：

<template>
  <div 
    :style="{
      backdropFilter: `blur(${blurStrength}px)`,
      background: `rgba(255, 255, 255, ${opacity})`
    }"
    class="glass-container"
  >
    <input v-model.number="blurStrength" type="range" min="0" max="20">
    <input v-model.number="opacity" type="range" min="0" max="1" step="0.1">
  </div>
</template>

<script>
export default {
  data() {
    return {
      blurStrength: 8,
      opacity: 0.3
    }
  }
}
</script>

浏览器兼容方案

对不支持 backdrop-filter 的浏览器（如 Firefox 默认需启用标志），使用备用方案：

.glass-fallback {
  position: relative;
}
.glass-fallback::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(10px);
  z-index: -1;
}

性能优化技巧

避免在大量元素或频繁动画中使用
限制模糊半径（通常 5-15px 足够）
配合 will-change: backdrop-filter 启用硬件加速
对静态元素使用 transform: translateZ(0)

完整组件示例

<template>
  <div 
    class="glass-card"
    :style="{
      '--blur': `${blur}px`,
      '--opacity': opacity
    }"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    blur: {
      type: Number,
      default: 8
    },
    opacity: {
      type: Number,
      default: 0.25
    }
  }
}
</script>

<style>
.glass-card {
  background: rgba(255, 255, 255, var(--opacity));
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
</style>