查看 Demo 源码

加载中…

成功勾选

表单微交互SVG 描边成功反馈仪式感

AI 改造

亮点解析

一笔一画绘制完成 — 圆圈先描边 0.4s、勾号延迟 0.25s 再描边 0.3s，用 stroke-dashoffset 动画让勾号像被手绘出来，而非瞬间出现
仪式感强化确认感 — 提交成功的反馈如果瞬间闪现，用户容易错过；顺序描边把“成功了”变成一个可观看的过程
如何向 AI 描述 — 说“SVG 圆圈和勾号都预设 stroke-dasharray 等于路径长度、stroke-dashoffset 等于路径长度，切换 class 把 offset 过渡到 0；圆圈 0.4s、勾号 0.3s 且 delay 0.25s，stroke-linecap 用 round”，并给出路径长度数值（circle r=24 约 151、勾号约 32）

适用场景

表单提交成功
支付完成页
任务完成标记
文件上传完成