微交互清单

是什么

微交互 = 界面上那些「小到不起眼、缺了就廉价」的瞬间反馈。页面的高级感，一半来自这些细节。这篇是速查表：做哪个功能查哪条，抄完就走。

按钮

• hover：轻微上浮或变色，150ms（transform: translateY(-2px)）
• 按压：:active 缩小到 0.97，模拟物理按压
• 提交中：按钮变 loading 态 + 禁用，防止重复提交
• 危险操作：颜色换合欢红系，且 hover 才出现「确认执行」的强化

.btn:active { transform: scale(.97); transition-duration: 80ms; }

按压要「更快」

hover 150ms、active 80ms——按下的反馈要比抬起更快，手感才脆。

输入框

• focus：边框变主色 + 柔和外圈（box-shadow: 0 0 0 3px 主色20%），绝不只换边框颜色
• 报错：边框变红 + 输入框轻微左右抖动（translateX(±4px) 两三个来回）
• 成功：右侧淡入一个小勾
• 字数限制：接近上限时计数器变色提醒，而不是提交时才报错

.input:focus {
  border-color: #6090b8;
  box-shadow: 0 0 0 3px rgba(96, 144, 184, .2);
  outline: none;
}

反馈与状态

• 操作成功：toast 从顶部滑入，2 秒自动消失，成功用绿色图标
• 加载等待：< 300ms 不显示 loading（闪一下反而闹）；> 300ms 骨架屏优于转圈；按钮内转圈优于全屏遮罩
• 空状态：不放白板，放插画/图标 + 一句人话 + 一个行动按钮
• 删除：弹确认框；或「删除后 5 秒内可撤销」体验更好
• 复制：按钮文字瞬时变「已复制 ✓」，1.5 秒后变回

列表与内容

• 列表入场：整组错峰淡入（每项 delay +50ms），不要逐个飞入
• 加载更多：底部显示骨架卡片而不是文字「加载中」
• 悬停可点卡片：整卡上浮 + 边框着色 + cursor: pointer，暗示可点
• 长列表锚点：右侧出现当前进度指示

页面级

• 路由切换：内容区淡入 300ms，消除「闪变」
• 弹窗：遮罩淡入 + 面板从下方 8px 浮入；关闭反向且更快
• 回到顶部：滚动超过一屏才出现，避免干扰阅读
• 主题切换：全站颜色加 transition: background-color .3s，切换变成优雅渐变

通用守则

三条铁律

1. 每个微交互 100-300ms，宁快勿慢
2. 只动 transform / opacity（见 CSS 动画基础）
3. 拿不准就不加——微交互做加法前先问：它在回答用户的什么问题？