图标旋转悬停 4 种特效（360°旋转/回弹/反向/上浮 CSS 源码）

效果演示（真实可交互）

把鼠标移到任意按钮上，观察图标的不同旋转方式。全部由 CSS transition 驱动，无任何 JS 参与，悬停与移出同样顺滑。

完整代码

HTML 结构：每个按钮包含图标 .is-ico 与文字 .is-label，通过给按钮加 is-360 / is-bounce / is-rev / is-float 切换玩法：

<button class="is-btn is-360">
  <span class="is-ico">⚙️</span>
  <span class="is-label">360° 旋转</span>
</button>

核心 CSS：

.is-ico {
  display: inline-block;
  font-size: 34px;
  line-height: 1;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* ① 整圈 360° 旋转 */
.is-360:hover .is-ico { transform: rotate(360deg); }

/* ② 0.6s 快速转一圈 + 回弹（回弹用 overshoot 缓动） */
.is-bounce .is-ico { transition-duration: .6s; }
.is-bounce:hover .is-ico {
  transform: rotate(360deg) scale(1.15);
  transition-timing-function: cubic-bezier(.68, -.55, .27, 1.55);
}

/* ③ 反向旋转 */
.is-rev:hover .is-ico { transform: rotate(-360deg); }

/* ④ 旋转 + 上浮 */
.is-float:hover .is-ico { transform: rotate(360deg) translateY(-4px); }

参数说明

兼容性与性能

• 纯 CSS 实现，Chrome / Firefox / Safari / Edge 现代版本全部支持，无兼容性顾虑
• 动画只作用于 transform，属于合成器属性，不触发重排重绘，性能开销极小
• 建议给图标加 will-change: transform，在大量图标的列表页能减少动画锯齿
• 若按钮在长列表中重复渲染，transition 时长统一即可保持交互节奏一致

常见问题

Q: 为什么我的图标旋转时会轻微抖动？ 大概率是图标本身不是正方形或基线不齐，给 .is-ico 加上 display: inline-block 与 line-height: 1 即可稳定旋转中心。

Q: 想旋转的同时改变图标颜色？ 给 .is-ico 增加 color 属性并在 transition 中声明：transition: transform .5s ease, color .3s ease;，hover 时改色即可。

Q: 图标用 SVG 时能直接旋转吗？ 可以，SVG 也是元素，transform: rotate() 同样生效；注意给 SVG 设置固定 width/height，避免视口尺寸波动。

Q: 移动端没 hover，点击有反馈吗？ 触屏上首次点击会触发 hover 态并停留，适合展示型页面；需要真正的点击反馈建议配合 :active 伪类加按压缩放。