图标变形动画

点击或悬停时，汉堡菜单图标平滑变形为关闭 × 号。

实时预览

代码

css

.morph span {
  display: block; width: 28px; height: 3px;
  background: #667eea; border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.morph:hover span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.morph:hover span:nth-child(2) { opacity: 0; }
.morph:hover span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

html

<div class="morph">
  <span></span><span></span><span></span>
</div>

纯 CSS/SVG 实现的图标变形动画图标动画效果——通过变换、描边动画和滤镜让 SVG 图标动起来。适用于按钮图标、状态指示、功能特性展示等场景。

快速使用

复制 CSS 代码到你的样式文件中
将 SVG 图标放入对应的 HTML 容器中
调整 width/height 控制图标大小，animation-duration 控制速度
修改 stroke 或 fill 颜色以匹配你的图标风格

使用场景

收藏/点赞：心形弹跳或变色动画，给用户操作的正向反馈
加载状态图标：旋转或脉冲动画表示操作进行中
功能特性图标：SVG 描边绘制动画展示功能的"展开"感
通知/消息图标：弹跳或抖动吸引用户注意到新消息

常见问题

Q: SVG 图标的动画如何实现？ A: SVG 内部的形状可以用 CSS animation 控制：stroke-dasharray + stroke-dashoffset 实现描边绘制，transform-origin 控制旋转中心，fill 和 stroke 控制颜色变化。

Q: 图标动画会影响 SVG 的响应式缩放吗？ A: CSS transform 不会影响 SVG viewBox 的缩放关系。但要注意 transform-origin 的默认值（50% 50%），必要时用像素值或百分比精确指定旋转/缩放中心。

Q: 图标弹跳动画能用在 loading 状态吗？ A: 完全可以。给动画加 infinite 属性即可无限循环。常见的应用场景：消息发送中、文件上传中、数据刷新中的状态图标。

浏览器兼容性

浏览器	兼容性
Chrome / Edge	✅ 完全支持（含 SVG CSS 动画）
Firefox	✅ 完全支持
Safari	✅ 完全支持
移动端浏览器	✅ 完全支持
IE 11	❌ SVG CSS 动画支持有限，建议降级为静态图标

使用说明

属性	说明
`translateY + rotate`	上下线条交叉旋转成 ×
`opacity: 0`	中间线条淡出
`nth-child`	分别控制三条线

图标变形动画 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐