用@keyframes定义±0.3deg~±0.8deg的轻量旋转动画，配合ease-in-out缓动和transform-origin:center，hover时触发0.3s–0.5s抖动，可加scale/translate增强真实感，注意移动端兼容与gpu加速。
用 CSS 实现图标 hover 时的轻微抖动效果，核心是用 @keyframes 定义一个极小角度（如 ±0.5deg）的左右旋转动画，并配合 transform: rotate() 和 animation 属性触发。关键在于“轻微”和“自然”，避免生硬或过度晃动。
定义抖动动画
创建一个轻量、循环、无延迟的旋转动画，角度控制在 ±0.3deg ~ ±0.8deg 之间，持续时间建议 0.3s–0.5s，缓动用 ease-in-out 更柔和：
@keyframes subtle-shake {
0% { transform: rotate(-0.5deg); }
25% { transform: rotate(0.5deg); }
50% { transform: rotate(-0.3deg); }
75% { transform: rotate(0.3deg); }
100% { transform: rotate(0); }
}
绑定到图标 hover 状态
给图标元素（如 <i class="icon"></i> 或 <svg></svg>）设置 hover 动画。注意：要加 transform-origin: center 保证绕中心旋转，且推荐用 animation-fill-mode: forwards 避免鼠标移开后突兀复位（可选）：
.icon {
display: inline-block;
transform-origin: center;
}
.icon:hover {
animation: subtle-shake 0.4s ease-in-out;
animation-fill-mode: forwards;
}
增强真实感的小技巧
- 加一点
scale(0.99)或translateY(-1px)到关键帧中，模拟“受力微偏”的物理感 - 避免同时多个图标一起抖——可加随机
animation-delay: -0.1s让节奏错开 - 移动端慎用：hover 在触屏设备上不生效，建议配合
:focus或点击态补充 - 性能优先：确保图标用
transform触发 GPU 加速，不要用left/top等重排属性
基本上就这些——抖得轻、转得顺、停得稳，才是好抖动。
立即学习“前端免费学习笔记（深入）”；
