纯CSS液态变形靠::before伪元素+精确transform动画实现，需伪元素放大覆盖、父容器overflow:hidden、自定义贝塞尔曲线及真机微调skewY/scaleY值。
纯 CSS 做不出物理意义上的液态变形，但用 ::before 伪元素 + 精确控制的 transform 动画，能骗过人眼——前提是尺寸、定位、动画曲线全对，漏一个就露白边或像滑块。
为什么伪元素必须比按钮大一圈
常见错误是把 ::before 设成和按钮等宽高，结果动画一动就露底色或断层。液体没有硬边界，它会漫过边缘，所以伪元素必须“撑开”：
-
width: 200%+left: -50%是横向全覆盖最稳方案（确保位移全程不漏底） - 如果按钮有
border-radius: 12px，伪元素的border-radius至少设为50%，否则转角卡顿 - 父容器必须带
position: relative且overflow: hidden，否则伪元素破框而出 - 别用
top: 0垂直居中——液体是从下往上漫的，起始状态应是transform: translateY(100%)
skewY 和 scaleY 怎么混进 transform 才不像窗帘
只用 translateY + scaleY 看起来像拉窗帘，不是液体。液体有表面张力和粘滞感，需要非线性形变：
-
skewY(-3deg)在动画中段加入，模拟液体边缘被拉扯时的微倾，比rotate更克制自然 - 关键帧必须拆步写：
0% { transform: translateY(100%) scaleY(0.8); }→70% { transform: translateY(0) scaleY(1.05) skewY(-2deg); }→100% { transform: translateY(0) scaleY(1) skewY(0); } -
scaleY(1.05)是点睛之笔：液体覆盖瞬间轻微“鼓起”，这是人眼识别“液态”的关键线索
动画时长和缓动函数怎么选才不假
太快像弹跳，太慢像卡顿，ease-in-out 又太机械。液态响应有惯性，得靠自定义贝塞尔曲线：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 推荐
cubic-bezier(0.34, 1.56, 0.64, 1)：前段加速快（液体开始涌动），中段有冲力（覆盖主体），后段收得柔（表面张力回弹） - 总时长控制在
0.9s左右：短于0.7s看不出流动，长于1.3s用户会误判为加载中 - 悬停用
transition即可；但点击反馈必须用@keyframes—— 因为点击需要精确控制skewY和scaleY的节奏，transition无法分段调控
移动端适配最容易忽略的三件事
PC 上跑得顺的液态按钮，在 iOS Safari 或安卓 WebView 里常出问题，核心不在性能，而在渲染逻辑差异：
-
backdrop-filter在部分安卓低版本 WebView 中失效，得加降级：background: rgba(255, 255, 255, 0.1) -
overflow: hidden在某些安卓 WebView 中对伪元素裁剪不生效，需额外加will-change: transform触发合成层 - 别依赖
background-attachment: fixed做视差——移动端基本不支持，改用background-position动画 +will-change: background-position
真正难的不是写出第一版动画，而是让 skewY 和 scaleY 在不同设备上都保持一致的“鼓起感”——这个值在 iOS 上可能要调到 1.03，在低端安卓机上反而得压到 1.01，没捷径，只能真机测。
