发光图标

发光效果

实时预览

代码

css

.glow-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .3s}
.glow-icon svg{width:36px;height:36px;stroke:#4ade80;fill:none;stroke-width:2}
.glow-icon:hover svg{filter:drop-shadow(0 0 8px #4ade80) drop-shadow(0 0 16px #4ade8066)}

纯 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 动画支持有限，建议降级为静态图标

发光图标 ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

📎 相关动画推荐