Checkbox Check Draw (复选框勾选绘制)
别称 Animated checkbox, Checkmark draw
勾选时，方框内的对勾一笔一笔地画出来。
适用场景
表单、待办清单
变体
- stroke-dashoffset draw
- Dash to Check
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“复选框勾选绘制”(Checkbox Check Draw)动画，也叫动画复选框(animated checkbox)或对勾绘制(checkmark draw)。
勾选时，方框填充颜色，对勾以一笔快速流畅的线条自己画出来；取消勾选时以同样方式擦除。
保持它是带选中状态的真正复选框，可以用键盘操作，并有清晰可见的焦点环。相似的动效
Success Checkmark (成功对勾)
别称 Animated success tick
圆圈和对勾自行画出，确认操作已成功。
适用场景
表单提交、支付完成
在[应用位置]添加“成功对勾”(Success Checkmark)动画，也叫 animated success tick。
先用一笔流畅的线条画出圆圈，接着在圆圈内画出对勾，整个图标再轻轻弹一下：沉稳、笃定。
操作成功时只播放一次，配上屏幕阅读器能播报的文字提示；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的图标。Line Drawing (线条绘制)
别称 Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
通过为虚线偏移添加动画，让 SVG 描边看起来沿路径被画出来。
适用场景
图标、Logo 和插画
在[应用位置]添加“线条绘制”(Line Drawing)动画，也叫路径绘制(path drawing)或自绘 SVG(self-drawing SVG)。
每条描边看起来沿路径从起点到终点顺滑地自己画出来，第二条描边（比如对勾）紧跟在第一条之后。
进入视口时只播放一次，不要循环；如果用户开启了“减少动态效果”(prefers-reduced-motion)，则直接显示画好的线条。点击试试
Toggle Switch (开关切换)
别称 Switch, Switch Thumb Slide
圆形滑块沿轨道滑动，轨道颜色在关和开之间切换。
适用场景
设置、深色模式
在[应用位置]添加“开关切换”(Toggle Switch)动画，也叫 switch。
打开或关闭时，圆形滑块平滑地滑到轨道另一端，同时轨道颜色随之变化：快速、干脆，不要弹跳。
做成真正可访问的开关(带 checked 状态的 role="switch")，并且支持键盘操作。Multi-Step Loader (多步骤加载)
别称 Step loader, Checklist loader
长任务推进时，步骤列表逐项高亮或打勾。
适用场景
AI 生成、新手引导中的处理
在[应用位置]添加“多步骤加载”(Multi-Step Loader)，也叫 step loader 或 checklist loader。
步骤从上到下逐个亮起，每完成一步就弹出一个小对勾，节奏平稳、便于阅读。
根据任务的真实进度推进步骤，而不是用固定计时器，并向屏幕阅读器播报每个已完成的步骤。Micro-interaction 中的其他动效
A
点击试试
Confetti (撒花)
别称 Confetti burst, Celebration
彩色纸片喷涌而出再飘落下来，用来庆祝成功。
适用场景
购买完成、达成目标
在[应用位置]添加“撒花”(Confetti)庆祝效果，也叫彩纸迸发(confetti burst)。
彩色小纸片从按钮中快速迸发出来，然后翻滚着飘落并渐渐淡出，形成一阵短促而热闹的纸片雨。
每次成功只触发一次，不要循环，不要挡住页面上的点击；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不要播放。点击试试
Copy-to-Clipboard Feedback (复制成功反馈)
别称 Copied state, Copy icon to checkmark
复制图标变成对勾，标签短暂显示“已复制”。
适用场景
代码块、分享链接
在[应用位置]添加“复制成功反馈”(Copy-to-Clipboard Feedback)动画，也叫已复制状态(copied state)或复制图标变对勾(copy icon to checkmark)。
点击复制按钮时，复制图标快速缩小消失，同时画出一个对勾，标签变为“已复制”，片刻之后一切平滑地恢复原样。
切换过程中保持按钮尺寸不变，不让任何东西位移，并把已复制状态告知屏幕阅读器。A
拖动试试
Drag (拖拽)
别称 Draggable, Drag constraints
拖拽时元素跟随指针移动，并可以限制在某个区域或某条轴上。
适用场景
滑块、可排序卡片
在[应用位置]添加“拖拽”(Drag)交互，也叫可拖拽(draggable)或拖拽约束(drag constraints)。
拖拽时元素直接跟随指针，在允许区域的边缘停住，松开后带一点回弹地弹回静止位置。
触摸和鼠标都要能用，拖动时下面的页面不能跟着滚动，并提供用键盘移动它的方式。