【Web前端】CSS实现毛玻璃效果

一、核心样式定义

css 复制代码

/* 定义设计变量 */
:root {
  --sidebar-bg: rgba(255, 255, 255, 0.7); /* 背景透明度 */
  --blur-intensity: blur(12px) saturate(120%); /* 模糊强度+饱和度增强 */
  --border-color: rgba(255, 255, 255, 0.2); /* 边框颜色 */
}

/* 基础毛玻璃类 */
.glass-effect {
  background: var(--sidebar-bg);
  backdrop-filter: var(--blur-intensity);
  -webkit-backdrop-filter: var(--blur-intensity); /* Safari 兼容 */
  border: 1px solid var(--border-color);
}

二、使用方式

html 复制代码

<!-- 在模板中直接应用基础类 -->
<div class="assistant-sidebar glass-effect">
  <!-- 内容 -->
</div>

<!-- 或通过@apply复用 -->
<style scoped>
.custom-element {
  @apply glass-effect;
  /* 可添加额外样式 */
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
</style>

三、效果调整

css 复制代码

/* 调整模糊强度 */
--blur-intensity: blur(20px); /* 增大模糊值 */

/* 修改背景透明度 */
--sidebar-bg: rgba(200, 200, 200, 0.5); /* 灰色调半透明 */

/* 增强视觉效果 */
box-shadow: 
  0 0 12px rgba(255,255,255,0.3) inset, /* 内发光 */
  0 8px 24px rgba(0,0,0,0.2); /* 外阴影 */

四、应用场景

侧边栏容器（.assistant-sidebar）
- 固定定位 + 垂直居中
- 组合使用毛玻璃与阴影效果
弹窗组件（.donate-popover）
- 继承基础毛玻璃样式
- 添加居中文本排版样式
图标容器（.icon-wrapper） -双层背景叠加：var(--icon-bg) + backdrop-filter: blur(6px) -悬停状态增强透明度变化

五、整体样式代码

css 复制代码

/* ================= 设计变量 ================= */
:root {
  /* 主容器背景透明度 */
  --sidebar-bg: rgba(255, 255, 255, 0.7);
  /* 图标默认背景 */
  --icon-bg: rgba(255, 255, 255, 0.5);
  /* 图标悬停背景 */
  --icon-hover-bg: rgba(255, 255, 255, 0.9);
  /* 边框颜色（半透明白） */
  --border-color: rgba(255, 255, 255, 0.2);
  /* 基础阴影效果 */
  --shadow-base: 0 8px 32px rgba(0, 0, 0, 0.1);
  /* 悬停阴影效果 */
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.12);
  /* 毛玻璃模糊强度（含饱和度增强） */
  --blur-intensity: blur(12px) saturate(120%);
}

/* ================ 毛玻璃基础样式 ================ */
.glass-effect {
  background: var(--sidebar-bg);
  /* 现代浏览器毛玻璃效果 */
  backdrop-filter: var(--blur-intensity);
  /* Safari 兼容方案 */
  -webkit-backdrop-filter: var(--blur-intensity);
  /* 微妙的边框增强层次感 */
  border: 1px solid var(--border-color);
}

/* ================ 侧边栏主容器 ================ */
.assistant-sidebar {
  position: fixed;
  /* 固定定位脱离文档流 */
  left: 20px;
  /* 左侧间距 */
  top: 50%;
  /* 垂直居中定位 */
  transform: translateY(-50%);
  /* 精确垂直居中 */
  border-radius: 16px;
  /* 圆角大小 */
  padding: 12px 8px;
  /* 内边距 */
  transition: all 0.3s ease;
  /* 平滑过渡动画 */
  z-index: 1000;
  /* 确保在最顶层 */
  box-shadow: var(--shadow-base);
  /* 基础投影 */
  @apply glass-effect;
  /* 应用毛玻璃效果 */

}

/* ================ 图标容器样式 ================ */
.icon-wrapper {
  position: relative;
  /* 相对定位用于子元素定位 */
  cursor: pointer;
  /* 手型光标指示可交互 */
  width: 40px;
  /* 固定尺寸 */
  height: 40px;
  display: flex;
  /* 弹性布局居中内容 */
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  /* 圆角匹配主容器 */
  background: var(--icon-bg);
  /* 使用变量背景 */
  backdrop-filter: blur(6px);
  /* 图标级模糊效果 */
  border: 1px solid rgba(159, 152, 152, 0.2);
  /* 图标容器边框 */
  box-shadow:
    0 0 0 1px rgba(159, 152, 152, 0.2) inset;
  /* 内嵌阴影增强层次 */

  &:hover {
    border-color: rgba(255, 255, 255, 0.4);
    /* 悬停时边框高亮 */
  }

  /* 复合过渡效果 */
  transition: background 0.3s,
  /* 背景色过渡 */
  box-shadow 0.3s,
  /* 阴影过渡 */
  transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* 弹性动画 */

  /* 悬停状态增强 */
  &:hover {
    background: var(--icon-hover-bg);
    /* 高亮背景 */
    box-shadow:
      var(--shadow-hover),
      /* 扩散阴影 */
      0 0 0 2px rgba(255, 255, 255, 0.4);
    /* 内发光效果 */
    transform: translateY(-3px);
    /* 上移3像素 */
  }
}