【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); /* 外阴影 */

四、应用场景

  1. 侧边栏容器(.assistant-sidebar)
    • 固定定位 + 垂直居中
    • 组合使用毛玻璃与阴影效果
  2. 弹窗组件(.donate-popover)
    • 继承基础毛玻璃样式
    • 添加居中文本排版样式
  3. 图标容器(.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像素 */
  }
}
相关推荐
b1gbrother14 分钟前
让你的Claude Code变得更聪明
前端·程序员
国家不保护废物23 分钟前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户25191624271123 分钟前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny23 分钟前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
邵洛24 分钟前
前端导出excel表格并修改导出表格样式
前端
风舞24 分钟前
JavaScript 核心概念及代码示例的梳理
前端
学长学姐我该怎么办26 分钟前
从零开始学前端html篇2
前端·html
尘世中一位迷途小书童27 分钟前
从零实现 Canvas 图形拖拽:让你的网页动起来!
前端
mrsk28 分钟前
JavaScript之变量的解构赋值全面解析(●'◡'●)
前端·javascript·面试
归于尽28 分钟前
回调函数在Node.js中是怎么执行的?
前端·javascript·node.js