【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像素 */
  }
}
相关推荐
FogLetter7 分钟前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
小公主19 分钟前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴22 分钟前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端 贾公子34 分钟前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder41 分钟前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛43 分钟前
vue3中实现echarts打印功能
前端·vue.js·echarts
尘心cx1 小时前
前端-HTML-day2
前端·html
歘chua1 小时前
组件封装:封装一个可复用的crud界面的思路
前端
徐小夕1 小时前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
爱编程的喵1 小时前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css