20 个很棒的 SVG 动画示例

可缩放矢量图形 (SVG) 是一种用 XML 编写的图像格式。 使用 SVG，您可以编写二维可缩放图形。 然后，您可以在 CSS 和 JavaScript 中实现和修改它们。

SVG 允许三种类型的图形：矢量形状（所有方向和形状的直线和曲线）、图像和文本。 由于其各种功能，网页设计师转向 SVG 来制作复杂的动画。 它们易于安装，在调整大小时不会降低质量，并且不需要任何第三方应用程序即可工作。

由于动画仍然越来越受欢迎，大多数人并不熟悉它们。 本文将重点介绍 20 个出色的 SVG 动画，这些动画展示了这种格式的潜力。

1. kittons的医疗SVG图标

这种温暖流畅的动画非常适合任何与健康相关的网站。 当您列出不同的线程时，图像会巧妙地出现。 救护车或原子会制造，眼睛会睁开，医生会跳出来。 该动画展示了 SVG 的所有乐趣和活力。

关联

2. SeanMcCaffery 悬停

您可以将其放到任何交互式网站上的通用动画。 当您悬停时，边框的微妙外观让您感到满意，并邀请您单击链接。

关联

3. Nikolay Talanov 下拉刷新（纸飞机）

通常，当您“下拉”页面时，页面会刷新。 这个动画把它带到了一个新的水平。 当您向下拉释放它时，您将向天空发射一架纸飞机。 如果您希望访问者经常刷新您的应用程序，您应该考虑添加这样的动画。

4. 继续前进 Diaco M. Lotfollahi

显示缩放矢量潜力的 SVG 动画。 人体流畅准确的动作令人着迷。

关联

5. HTML5 视频中添加了 SVG 过滤器

来自 Google Chrome 团队的 Paul Irish 研究了 SVG 如何修改矢量图形之外的内容。 他结合 CSS 和 SVG 制作了令人惊叹的视觉过滤器，以表明 SVG 动画可以成为现成视频的一个很好的补充。

关联

6. 拼图

您可以使用 SVG 动画制作令人惊叹的交互式拼图游戏。 在这个例子中，我们可以选择许多图片中的一张，看看它是如何分解成许多小块拼图的。 你也可以重建它！

关联

7. Patrick Young的线性渐变

如果你喜欢霓虹灯和漂亮的字体，你会喜欢这个动画。 这项工作展示了您如何不需要任何移动线条来制作出色的动画，只需要出色的字体和具有渐变效果的适当颜色代码。

关联

8. 让我们旅行 jjperezaguinaga

两架飞机和一个热气球围绕着世界著名的地标旋转。 这部动画色彩鲜艳、乐观、令人兴奋。 它展示了如果您精通 SVG，您可以做的所有事情。

关联

9. Mohamad Mohebifar 的时钟

显示当前时间的移动时钟的简单 SVG 动画。 指针的舒缓运动和简约的设计为这个动画创造了奇迹。

关联

10. Luigi De Rosa 的动画图标

如果您将鼠标悬停在这些图标上，您将触发动画，这些动画简单但有效。 您可以看到，您不必创造奇迹就可以制作出令人印象深刻的动画图标。

11. Chris Gannon 的 SVG 中的所有设备

一个一次性动画，以最具创意的方式遍历我们使用的所有智能设备。 台式机将变成笔记本电脑，笔记本电脑变成平板电脑，然后变成智能手机。

关联

12. 克里斯·甘农的瀑布

Chris Gannon 的另一个作品，这是对泡沫瀑布底部的巧妙演示。 水的运动很整齐，你可以看到飞溅的小水滴离开动画的边界，让一切看起来更逼真。

关联

13. Blake Bowen 的植物生成器

现在这个是另一回事。 当您单击“创建”按钮时，您会看到植物正在生长和生长。 但是每次点击，都会形成不同的图案。

关联

14. Hamish Williams 的可点击图标

另一个交互式 SVG，一旦您单击它就会触发动画。 一旦您单击它，它将启动“发送”动画。

关联

15. Marco Barría 的新蛋糕

有趣的动画，逐层展示蛋糕的制作过程。 这是一个令人印象深刻的 SVG 动画，适用于生日贺卡。

16. Chris Gannon 的碎纸机

如果你喜欢看碎纸，你会喜欢这部动画，它描绘了一台机器以无缝的顺序无限次地撕纸。

关联

17. GREYGHOST 的 Low PolyLion

这是一个令人兴奋的插图和动画，描绘了狮子头以动画多边形的形式出现和消失。

关联

18. Leela 的沙漏装载机

另一个仅使用 SVG 的有效动画。 每 5 秒，沙漏就会倒转并开始一个新的循环。

关联

19. 响应牛莎拉·德拉斯纳

这是一个有趣的互动动画，它允许你点击一头牛并将它拖到月球上，而一个困惑的宇航员看着它。

20. Domany的学生

一个热心的学生似乎准备好学习了！ 这是一个很棒的动画，书页整齐地翻动。 学生没有眨眼，但这仍然是一个非常整洁的动画来结束这个列表。

关联

到你了

您最喜欢的未包含在此列表中的 SVG 动画有哪些？ 在下面的评论中分享您的选择！