Liquid Glass

重新定义玻璃质感

基于 SVG feDisplacementMap 的 Liquid Glass 效果
精确的边缘折射 + 色散 + 弹性交互

🔮

玻璃折射

feDisplacementMap 精确控制每个像素的位移量，边缘弯曲如真实玻璃

🌈

色散 Aberration

R/G/B 三通道以不同位移量分开再重组，仅在边缘产生棱镜色差

💧

弹性液体感

鼠标靠近时卡片向指针方向拉伸，模拟液体表面张力，松手弹性回弹

✨

动态高光

边框渐变角度随鼠标位置实时变化，模拟光线在玻璃表面流转

🎯

边缘蒙版

径向渐变 + discrete 阶梯函数创建边缘蒙版，中心内容始终清晰

🫧

磨砂 Frost

backdrop-filter blur + saturate 叠加滤镜，完美呈现磨砂玻璃质感

开始体验
了解更多

技术细节

13步
SVG 滤镜管线
3通道
R/G/B 色散
Canvas
位移贴图生成
200px
弹性激活区

SVG 滤镜管线

  • feImage 加载位移贴图
  • R/G/B 三通道不同位移量
  • feColorMatrix 分离单通道
  • feBlend screen 重组
  • 径向渐变边缘蒙版
  • feComponentTransfer discrete
  • feComposite over 合成

交互系统

  • 鼠标相对中心偏移计算
  • 弹性系数控制拉伸强度
  • 方向性缩放(sX/sY)
  • 激活区 200px 渐入渐出
  • Spring ease 回弹
  • 边框渐变角度实时更新
  • CSS mask 空心边框

试试拖拽

📱
"The details are not the details. They make the design."
— CHARLES EAMES
← 赛博乡村 · Cyber Rustic