Toggle Switch (开关切换)
别称 Switch, Switch Thumb Slide
圆形滑块沿轨道滑动，轨道颜色在关和开之间切换。
适用场景
设置、深色模式
变体
- checkbox-hack toggle
- role=switch
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“开关切换”(Toggle Switch)动画，也叫 switch。
打开或关闭时，圆形滑块平滑地滑到轨道另一端，同时轨道颜色随之变化：快速、干脆，不要弹跳。
做成真正可访问的开关(带 checked 状态的 role="switch")，并且支持键盘操作。相似的动效
点击试试
Checkbox Check Draw (复选框勾选绘制)
别称 Animated checkbox, Checkmark draw
勾选时，方框内的对勾一笔一笔地画出来。
适用场景
表单、待办清单
在[应用位置]添加“复选框勾选绘制”(Checkbox Check Draw)动画，也叫动画复选框(animated checkbox)或对勾绘制(checkmark draw)。
勾选时，方框填充颜色，对勾以一笔快速流畅的线条自己画出来；取消勾选时以同样方式擦除。
保持它是带选中状态的真正复选框，可以用键盘操作，并有清晰可见的焦点环。ABC
点击试试
Tab Indicator Slide (标签指示条滑动)
别称 Sliding underline, Active tab indicator, Segmented control pill
下划线或胶囊形背景从旧标签滑动到新选中的标签。
适用场景
标签栏、分段控件
在[应用位置]添加“标签指示条滑动”(Tab Indicator Slide)，也叫 sliding underline 或 active tab indicator。
选中新标签时，下划线从旧标签滑到新标签，快速并平滑减速；如果两个标签宽度不同，就顺势伸缩到新标签的宽度。
保持正确的标签页语义并支持方向键切换；如果用户开启了“减少动态效果”(prefers-reduced-motion)，指示条直接移过去，不做滑动。••••••ABCDEF
点击试试
Password Reveal Toggle (密码显隐切换)
别称 Show/hide password, Eye icon toggle
显示或隐藏密码时，眼睛图标在睁开和带斜线之间切换。
适用场景
登录和注册表单
在[应用位置]添加“密码显隐切换”(Password Reveal Toggle)，也叫 show/hide password 或眼睛图标切换(eye icon toggle)。
点击眼睛时斜线迅速擦除，隐藏的圆点交叉淡入为真实字符；再次点击时斜线重新画出并隐藏字符：流畅、迅速，不要弹跳。
保持输入框宽度不变以免文字跳动，并把切换做成真正的按钮，用标签说明当前密码是否可见。Micro-interaction 中的其他动效
A
1
点击试试
Add to Cart Fly (加购抛物线)
别称 Fly to cart, Add-to-cart animation
商品图片一边缩小一边沿弧线飞入购物车图标。
适用场景
电商
在[应用位置]添加“加购抛物线”(Add to Cart Fly)动画，也叫飞入购物车(fly to cart)或加购动画(add-to-cart animation)。
点击加购按钮时，商品图片的一个小副本一边缩小，一边沿一条流畅而快速的弧线飞入购物车图标，购物车在数量更新时轻轻弹一下。
每次点击只播放一次，不要移动原来的商品卡片；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就省略飞行动画，但照常更新购物车。A
点击试试
Confetti (撒花)
别称 Confetti burst, Celebration
彩色纸片喷涌而出再飘落下来，用来庆祝成功。
适用场景
购买完成、达成目标
在[应用位置]添加“撒花”(Confetti)庆祝效果，也叫彩纸迸发(confetti burst)。
彩色小纸片从按钮中快速迸发出来，然后翻滚着飘落并渐渐淡出，形成一阵短促而热闹的纸片雨。
每次成功只触发一次，不要循环，不要挡住页面上的点击；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就不要播放。