h5下拉刷新中云朵变形动画的核心是用js监听touchmove动态设置--pull-progress自定义属性，css通过calc()/clamp()、clip-path polygon()、transform+filter等联动实现响应式有机形变，并配合transition平滑重置。
在 H5 移动端下拉刷新场景中，用 @keyframes 实现云朵变形动画，核心是把“下拉过程”映射为 CSS 自定义属性（--pull-progress）的动态变化，再通过 animation 结合 transform、clip-path 或 filter: blur() 等能力驱动云朵形态渐变——不依赖 JS 动画帧，但需 JS 控制自定义属性值。
用 CSS 自定义属性联动下拉进度
云朵变形不能靠纯时间轴动画（比如 3s 内自动变形），而要响应用户下拉距离。方案是：JS 监听 touchmove，实时设置容器的 --pull-progress 值（范围建议 0–100），CSS 中用 calc() 或 clamp() 将其转为形变参数：
- 例如云朵宽度随下拉拉伸：
width: calc(80px + var(--pull-progress) * 0.4px); - 高度压缩模拟“被拽扁”：
height: clamp(30px, 60px - var(--pull-progress) * 0.3px, 60px); - 配合
border-radius动态调整圆角，让云朵边缘从饱满变扁平甚至带尖角
用 clip-path 做非线性云朵轮廓变形
纯缩放太机械，真实云朵下拉时轮廓会流动扭曲。用 clip-path: polygon() 配合自定义属性可实现这点：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 基础云朵用
clip-path: circle(50% at 50% 50%)或手绘贝塞尔路径 - 下拉时，让多边形顶点坐标随
--pull-progress偏移，例如：clip-path: polygon(50% 0%, calc(30% + var(--pull-progress)*0.2%) 20%, ...); - 注意：移动端 Safari 对
clip-path动画支持良好，但需加will-change: clip-path提升性能
用 transform + filter 模拟“蓬松感”与“拉丝感”
单靠形状变化不够生动，加入质感提升趣味性：
- 轻微
transform: scale(1, 0.95) skewX(-3deg)模拟被向下拽的倾斜压扁 - 下拉越深，叠加
filter: blur(1px)+opacity: calc(1 - var(--pull-progress) * 0.005)，营造云朵边缘“散开”“半透明拉丝”效果 - 关键细节：用
transform-origin: center bottom让变形锚点落在云朵底部，更符合“被往下拉”的物理直觉
动画触发与重置要自然
下拉结束（松手/回弹）时，云朵不能突兀复原，需平滑过渡：
- 松手瞬间，将
--pull-progress设为 0，并给容器添加transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); - 若进入刷新状态（如服务器返回数据），可临时冻结变形，或切换为旋转+脉冲动画表示“正在加载”
- 避免在快速连续下拉时频繁 setStyle，建议节流至 16ms（≈60fps）更新自定义属性
本质上，这不是一个“写好 keyframes 就完事”的动画，而是用 CSS 自定义属性做数据桥梁，把用户手势转化为视觉变量，再用现代 CSS 属性组合出有机变形。只要控制好变量映射逻辑和缓动曲线，云朵就能像真的被手指拽住一样，柔软、延展、有呼吸感。
