Appearance
悬浮图标
上下悬浮效果
实时预览
代码
css
.float-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;cursor:pointer;animation:icon-float 2s ease-in-out infinite}
.float-icon svg{width:36px;height:36px;stroke:#667eea;fill:none;stroke-width:2}
@keyframes icon-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}纯 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 动画支持有限，建议降级为静态图标 |