MICRO-INTERACTION
成功打勾Success Checkmark
圆形底放大出现，勾线随后像被手写一样描出来。把「操作成功」变成一个有仪式感的瞬间。
效果预览
适合用在哪
表单提交成功、支付完成、任务勾选、审批通过。
容易踩的坑
- 成功动画超过 1.5 秒且阻塞后续操作，用户被迫干等。
- 只有视觉打勾没有文字，读屏用户不知道提交是否成功。
- 请求还没返回就先播放打勾，失败时需要尴尬地撤回成功状态。
设计提示词 · Prompt
成功打勾（Success Checkmark）：圆形底色 52px、浅绿 #dcfce7，动画 2.8s cubic-bezier(.2,1.5,.4,1) 无限循环：从 scale(.3) opacity:0 到 scale(1) opacity:1（14% 处），到 80% 保持，最后 scale(.85) opacity:0 淡出。勾用 SVG <path>，stroke 深绿、线宽 2.6、linecap/linejoin 都是 round，用 stroke-dasharray:30 与 stroke-dashoffset 从 30 到 0 的动画做「描线」，开始时间比圆形晚约 0.2s。整体节奏感来自「先弹出来、再画上去」的两段。
Success Checkmark: a 52px circular base in light green #dcfce7, animating 2.8s cubic-bezier(.2,1.5,.4,1), infinite: from scale(.3) opacity:0 to scale(1) opacity:1 (at 14%), held until 80%, finally fading out with scale(.85) opacity:0. The check is an SVG <path> with a dark green stroke, stroke width 2.6, round linecap/linejoin, using stroke-dasharray:30 with stroke-dashoffset animating from 30 to 0 to "draw" the line, starting about 0.2s after the circle. The overall rhythm comes from the two stages: "pop out first, then draw on".
常见搭配
同一页面里经常和「成功打勾」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="mi-check">
<div class="mi-check__c">
<svg viewBox="0 0 24 24"><path d="M4 12.5 9.5 18 20 6.5"/></svg>
</div>
<span>提交成功</span>
</div>
</div>