雾玻璃 Glassmorphism 实践手记

你现在看到的小屋，就是雾玻璃风格。磨砂、半透明、背后有彩色光斑在飘 —— 好看又好写。

核心就三行 CSS

.glass {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.65);
}

blur() 决定磨砂程度，saturate() 让透出来的颜色更鲜艳。加上半透明白边，玻璃质感一下就出来了。

小技巧：背景一定要是渐变或彩色光斑，纯白背景是看不出雾玻璃效果的。

深色模式怎么兼容

用 CSS 变量切换 --glass-bg 和 --glass-border，深色下把背景换成半透明深色、边框透明度调低即可，一行 JS 切换 data-theme 属性就够了。

配合动画库

入场用 Animate.css 的 fadeInUp，悬停用 Hover.css 的 hvr-bounce-to-right、hvr-wobble-horizontal，组件风格参考 UIverse 的按钮和进度条 —— 全部是现成的 CSS，零 JS 成本。