Liquid Glass · 2020s 高端质感

让界面如液体般流动

虹彩油膜光谱在深空底色上缓慢流转，SVG 湍流位移让形状如液体般呼吸；backdrop-filter 动态模糊叠加红青色像差，每一次过渡都以 400–600ms 的流体曲线完成。

感受流动 了解更多
类别General 通用风格
年代2020s 现代
复杂度High 高
最适合高端 SaaS / 奢华电商 / 创意品牌

风格特性

液态玻璃 = 玻璃拟态的流体进化：形状会形变、色彩会流转、模糊会呼吸。

虹彩渐变

油膜光谱般的多色渐变随时间缓慢旋转流动（hue-rotate 18s 循环），营造全息般的高级质感。

SVG 液态形变

feTurbulence 湍流驱动 feDisplacementMap 位移，让玻璃球体如液滴般呼吸、涌动、重塑轮廓。

动态模糊与色像差

backdrop-filter 实时磨砂 + saturate 提纯，标题叠加红青双色错位，制造镜头般的光学质感。

按钮与控件

悬停时渐变位移并泛起辉光，按压则轻微收缩——一切过渡都是流体的。

Premium 质感 悬停 / 按压 / 禁用状态均有流体反馈

表单示例 · 申请内测

输入框是一片薄玻璃：聚焦时亮起电光青焦点环并泛出辉光。

配色板

彩虹光谱的高饱和虹彩，漂浮在深空基底与半透明玻璃层之上。

霓虹品红#FF2E88
虹彩紫#7C4DFF
电光青#00E0FF
流体薄荷#38FFC3
玻璃白rgba(255,255,255,.15)
深空底#070A1C

字体级阶

显示级 · Outfit 700 · 42px

流动的光与形

标题 · Outfit 600 · 28px

虹彩、湍流与呼吸感

正文 · Inter 400 · 16px

液态玻璃以动态模糊与流体形变构建界面层级，透明度与光泽共同传达「悬浮于内容之上」的空间秩序。

标签 · Inter 600 · 13px · 字距 0.14em

Liquid Glass · 液态玻璃