如何用css实现图标旋转过渡效果

实现图标旋转过渡需使用CSS的transform和transition属性。通过transform: rotate()设置旋转角度，transition实现平滑动画，如:hover时旋转180度；持续旋转可用@keyframes定义无限循环动画，适用于加载图标；结合JavaScript可切换类名实现开/关状态的可逆旋转；优化细节包括设置display、调整transform-origin及使用ease-in-out曲线，推荐字体图标或SVG以保证清晰度。

要实现图标旋转的过渡效果，关键是使用 CSS 的 transform 和 transition 属性。通过设置旋转角度并添加平滑过渡，可以让图标在状态变化时自然转动。

基础旋转动画

使用 transform: rotate() 可以让图标旋转指定角度。配合 transition 可以实现过渡动画。

HTML:
<span class="icon">↻</span>

CSS:
.icon {
  display: inline-block;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.icon:hover {
  transform: rotate(180deg);
}

持续旋转动画（加载图标）

如果需要图标一直旋转，比如做加载动画，可以使用 @keyframes 定义动画。

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading {
  animation: spin 1s linear infinite;
}

可逆旋转（开/关切换）

有时需要图标在两种状态之间来回旋转，比如下拉箭头展开收起。可以通过 JS 切换类名控制。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

立即学习“前端免费学习笔记（深入）”；

CSS:
.arrow {
  transition: transform 0.3s ease;
}
.arrow.rotate {
  transform: rotate(180deg);
}

JavaScript（可选）:
document.querySelector('.arrow').addEventListener('click', function() {
  this.classList.toggle('rotate');
});

优化细节

为了让旋转更顺滑，注意以下几点：

• 设置 display: inline-block 或 block，否则 transform 可能无效
• 使用 ease-in-out 或自定义 cubic-bezier 曲线提升动效质感
• 旋转中心默认是元素中心，如需调整可用 transform-origin
• 图标建议使用字体图标或 SVG，便于缩放和渲染

以上就是如何用css实现图标旋转过渡效果的详细内容，更多请关注php中文网其它相关文章！