轻微左右晃动拒绝效果需用非对称CSS动画实现：0%→0deg，25%→–6deg（左甩），50%→2deg（右微偏），75%→–3deg（再左压），100%→0deg（强回正）；时长0.4s、执行1次、cubic-bezier缓动、forwards保持终态；仅用于错误反馈，禁用hover，须适配减少动画偏好。
网页提示框实现“轻微左右晃动拒绝”效果，核心是用 CSS @keyframes 定义一个短周期、小角度、非对称的旋转震荡动画，并配合恰当的触发时机与视觉约束，传达明确的“拒绝”语义，而非普通悬停反馈。
关键帧要体现“拒绝感”：非对称+快速回正
左右晃动若完全对称（如 0° → –4° → 0° → +4° → 0°），容易被感知为中性提示或警告；而“拒绝”需要更强的否定倾向——建议采用左偏更大、右偏更小、末尾强回弹的设计：
- 0%：transform: rotate(0deg)
- 25%：transform: rotate(-6deg)（向左明显一甩）
- 50%：transform: rotate(2deg)（右偏微弱，不强调）
- 75%：transform: rotate(-3deg)（小幅再左压，制造犹豫感）
- 100%：transform: rotate(0deg)（干净回正，表示“已拒绝，不继续”）
这样比纯对称更符合人类对“摇头拒绝”的直觉，且避免晕眩感。
动画参数要克制：时长短、次数少、不循环
拒绝动作应果断、一次到位，不宜反复或持续：
- animation-duration: 0.4s —— 太慢显得迟疑，太快则用户来不及识别
- animation-iteration-count: 1 —— 拒绝只需一次完整动作，重复会削弱确定性
- animation-timing-function: cubic-bezier(0.3, 1.2, 0.5, 1) —— 前段加速+后段强收，模拟肌肉突然收紧后复位
- animation-fill-mode: forwards —— 确保结束在 0deg，不残留旋转影响后续交互
触发方式需明确：仅响应无效操作，非悬停
晃动拒绝不是装饰，而是状态反馈，必须绑定具体错误场景：
- 表单提交失败时，给输入框或错误提示框添加
class="reject-shake"，并确保 JS 在触发前先移除旧类再添加新类（防止动画因类未变而跳过） - 禁止用
:hover实现——悬停是中性态，不能代表拒绝 - 可搭配
transform-origin: bottom center（对图标类）或center（对文字框），让晃动轴心更自然 - 务必适配
@media (prefers-reduced-motion: reduce)，设为animation: none，保障可访问性
视觉上强化拒绝语义
单靠晃动不够直观，建议组合使用：
- 晃动同时，文字颜色短暂加深（如从 #666 → #d32f2f），并加粗
- 背景色可叠加一层极淡的红色半透层（
background-color: rgba(211, 47, 47, 0.04)），仅在动画期间生效 - 禁用相关按钮（
pointer-events: none）并降低透明度，形成“已被拒绝”的操作锁定感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
