Apr 22, 2026Evergreen

我的阅读栈：从 Zettelkasten 到数字花园

三年的笔记折腾让我学到的，关于知识系统怎么搭建的几条经验。

notesthinking
Mar 15, 2026Budding

Framer Motion 的 layoutId：共享元素过渡的工作原理

为什么 layoutId 是 SPA 路由间共享元素过渡最稳的方案，以及它的几个坑。

reactanimation
Feb 1, 2026Seedling

为什么我放弃了 scroll-snap

原生 scroll-snap 写起来很爽，但一旦动效要超过 CSS 能表达的范围，就要换 JS。

cssux
Mar 8, 2025Budding

SVG 动画的几种范式比较

SMIL、CSS、JS、Web Animations API,各有适用场景。一张速查表。

svganimation
Feb 14, 2025Seedling

字体加载策略：FOIT vs FOUT 之外

Web 字体加载的两个传统问题之外,还有 size-adjust 这个新玩具。

performancetypography
Jan 20, 2025Seedling

快捷键设计的几个原则

Vim、Notion、Linear,好的快捷键有共同的纹理。

uxui
May 8, 2026·Budding·
#css#design

复刻液态玻璃：从 backdrop-filter 到光线折射

苹果在 iOS 26 与 macOS Tahoe 上推出的 Liquid Glass，是一种比传统毛玻璃更"活"的材质——它不只是模糊背景， 还会折射光线、在曲面边缘产生轻微的视差与高光。要在 web 上还原，需要把几个分别独立的视觉特性叠加起来。

三层结构

最朴素的做法是把每个特性切成一层 CSS：

  • 底层：backdrop-filter: blur(28px) saturate(180%)，吃掉背景细节
  • 中层：SVG <feDisplacementMap> 把局部像素轻微推开，模拟折射
  • 顶层：径向 / 线性高光渐变，给左上角一道柔和的曲面反光
.glass {
  backdrop-filter: blur(28px) saturate(180%);
  background: linear-gradient(135deg,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0.15));
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 30px 60px -20px rgba(15,23,42,0.18);
}

折射感

feDisplacementMap 的参数中 scale 控制位移强度，保持在 8 以下才不会显得 glitchy。 噪点贴图可以是低分辨率 <feTurbulence> 产物——把 baseFrequency 拉到 0.012 左右，再用 <feGaussianBlur> 抚平。

活感

最后一步是 hover 时让左上角高光跟随鼠标轻微位移。这层动效不能急，150ms 的 ease-out 是上限。

←→or scroll·Enterto open