这是一款基于GSAP 与 CSS技术实现的液态玻璃百分比进度卡片。五支透明容器用黄、橙、粉、蓝、青色液面表达不同百分比，下方配有图标、标题与短说明。GSAP 编排错峰入场和液面上升，CSS 负责玻璃边缘、反光、渐变与液体细节。鼠标停留会出现跟随提示并带动卡片轻微倾斜，点击则随机切换演示数值，形成一组可以操作的数据展示卡。
液态玻璃进度卡的三层交互反馈
液面与数字成对更新。点击后百分比、填充高度和液面边缘同步变化，不只是替换上方数字。
入场分段错开。容器先出现，液面再以弹性节奏升起，五个项目之间保留少量时间差。
悬停反馈兼顾读数。提示显示项目名称与比例，容器和说明卡还有抬升、倾斜与亮度反馈。
GSAP液面高度为何要与边缘一起更新
每个项目用 data-value 保存比例，并将数值传入 CSS 自定义属性。液体主体与液面边缘是两个元素，初始化时 GSAP 分别写入高度和底部位置；后续更新也必须同步处理这两处，避免内联动画样式覆盖变量。减少动态模式会关闭部分位移与弹性效果，保留基本读数。
item.style.setProperty("--pct", randomLift);液体进度条的比例与配色如何修改
初始比例、中文标题和说明在 index.html，颜色与玻璃细节在 style.css 的各配色类中；随机范围、入场顺序和悬停幅度位于 script.js。用于真实数据时，应替换点击随机数逻辑，从自己的数据源更新比例，并约束百分比范围。
液态数据卡用于业务前的常见问题
点击后的数字是真实统计吗？
当前是随机演示，点击只用于观察变化，不代表接口返回值。接入业务时应去掉随机生成逻辑，改成实际指标。
可以增加或减少项目吗？
可以沿用单个 item 的结构，但还要调整 CSS 网格列数、间距与容器宽度。项目增加后，建议重新检查小屏阅读与入场总时长。
为什么有时没有弹性动画？
页面会读取系统的减少动态偏好；启用后会省略部分动画。GSAP 依赖已本地保存，若整个效果缺失，还需检查脚本路径与加载顺序。
适合指标展示、任务进度和数据看板原型。完整液面结构与动画编排可下载查看。
