动画嵌入测试#

本文档展示在 Rspress 中嵌入各种动画形式的效果对比。

1. SVG 动画（内嵌 CSS 动画）#

SVG 动画是矢量图，放大不模糊，体积小，推荐首选。

2. GIF 动画#

GIF 兼容性最好，但画质有限（256 色）、不支持透明通道（只支持 1bit 透明）、文件体积较大。本例 22KB。

3. APNG 动画#

APNG 支持全透明通道和 24bit 真彩色，画质优于 GIF，体积更小。本例 15KB。

4. WebP 动图#

WebP 动图支持有损/无损压缩，现代浏览器全支持。本例 33KB（有损模式，画质更高）。

5. SVG 弹球动画#

用 SVG SMIL 动画实现的弹球效果，矢量无失真，文件仅几百字节。

6. CSS 动画（内嵌样式）#

通过 Markdown 的 HTML 嵌入能力，直接写 CSS 动画：

对比总结#

格式	矢量/位图	透明通道	体积	浏览器兼容	适用场景
SVG 动画	矢量	完整支持	极小	全部	流程图、图标动画、数据可视化
GIF	位图	仅 1bit	大	全部	简单循环动画、表情包
APNG	位图	完整	中	现代浏览器	高质量带透明通道的动画
WebP 动图	位图	完整	小	现代浏览器	替代 GIF，体积更小
MP4 Video	位图	不支持	中	全部	录屏演示、复杂动画
CSS 动画	矢量	完整	极小	全部	UI 微动效、简单几何动画