使用CSS的transform+transition对.layui-nav-item > a > .layui-icon实现悬停微晃，仅作用于图标不干扰文字与折叠布局，收缩态下保持一致效果，推荐旋转2–3°加±2px位移，时长0.3s内。
给 layui 侧边栏菜单图标添加鼠标悬停晃动效果，核心是用 CSS 的 transform + transition 实现轻微旋转或抖动，不依赖 JS，也不干扰 layui 的导航逻辑。关键在于精准选中图标元素，并避免影响文字、点击区域和折叠状态。
只对图标生效，不碰文字和容器
layui 菜单项结构通常是：<li class="layui-nav-item"><a><i class="layui-icon"></i>菜单名</a></li>。晃动效果必须只作用于 <i class="layui-icon"></i>，不能加在 a 或 li 上，否则会带动文字偏移、触发 layout 重排，甚至在收缩态下破坏居中布局。
- 正确选择器：
.layui-nav-item a .layui-icon或更稳妥的.layui-nav-item > a > .layui-icon - 避免写成
.layui-nav-item:hover .layui-icon—— 这会在整个菜单项悬停时触发，图标晃动范围过大，体验生硬 - 收缩态（
.layui-side-collapsed）下，图标已居中且无文字，此时晃动仍应保留，但需确保transform不受父级text-align干扰
实现自然微晃：旋转 + 位移组合
纯 shake 动画容易刺眼，推荐用 2–3° 内的轻微旋转配合 ±2px 水平位移，持续时间控制在 0.3s 内，符合人眼舒适区间。
- 基础 CSS 示例（放入自定义样式文件，不要内联）：
.layui-nav-item > a > .layui-icon:hover {
transform: rotate(2deg) translateX(2px);
transition: transform .3s ease-out;
}
/* 收缩态下也生效，保持一致性 */
.layui-side-collapsed .layui-nav-item > a > .layui-icon:hover {
transform: rotate(1.5deg) translateX(1px);
}
- 若想更灵动，可加
transform-origin: center确保绕中心旋转，避免边缘跳变 - 不建议使用
@keyframes shake自定义动画——层级高、易冲突，且在子菜单展开/折叠时可能被 element 模块重置
避开 layui 渲染干扰
layui 调用 element.render('nav') 会重建 DOM 属性，但不会清除已绑定的 :hover 样式。因此只要 CSS 选择器稳定、不依赖动态 class，晃动效果就不会丢失。
- 切勿在
element.on('nav')回调里用 JS 添加style.transform—— 这会覆盖 CSS transition，导致动画卡顿或失效 - 不要给图标加
id或额外class再单独写 hover，增加维护成本且易与折叠逻辑冲突 - 测试时注意：鼠标快速进出图标区域，CSS hover 天然支持防抖，无需 JS 节流
移动端适配说明
手机端无 hover，该效果自动失效，无需额外处理。如需触摸反馈，可改用 :active 状态做按压缩放（transform: scale(0.95)），但仅限真机测试，模拟器可能不触发。
