在过去的5年里，网络上的动画发生了根本性的变化。SVG动画是在网页上操作图形的最新技术之一。尽管SVG已经被支持了很长时间，但它只是最近才在大多数Web浏览器中获得支持。

有了更多的支持，蚌埠网页制作开发人员就会有更多的受众和更多的安全性来测试酷点子。随着时间的推移，这些想法成为共同的趋势，因为他们被数百名设计师采纳。我挑选了几个例子，最好地演示了这些SVG动画效果，以及如何将它们应用于网站布局。

航行效应

网站标题和导航菜单是动态SVG的完美区域。矢量既可以作为图标，也可以作为文本，这给即兴创作留下了很大的空间。

大多数设计师都认为可用性先于美学。形式遵循功能。这意味着你不应该疯狂的效果，但如果你可以加强界面，这是值得的努力。

我最喜欢的例子之一可以在比安戈导航。包括徽标在内的每个链接都被设计为SVG。当悬停的链接，你会得到一个很好的反弹效果，加上一个独特的颜色。该标志实际上显示了一个独特的梯度，以吸引更多的注意力。

虽然一些开发人员可能反对将svgs用于基于文本的元素，但这种效果确实给设计添加了一个插件。尽管很简单，但动画显然很突出。

导航图标是SVG的另一种用途。一些设计人员在上面的链接中加入了独特的图标，而另一些人则使用图标来连接导航。一个例子是流行的汉堡包3条菜单图标与滑动抽屉菜单连接。

这个代码笔片段演示了SVG动画的美丽之处。它变成了一个X，在图标周围有一个圆形的环。它不仅能吸引人们的注意，而且还能在不使用任何文字的情况下传递信息。

如果您想要更多的动态图标，您可以将它们放入子标题或内部导航部分。例如Zoook‘s Musicana页面使用音乐图标来划分产品类别。

注意，主音乐图标是一个具有微妙动画效果的SVG。音乐音符从扬声器中播放出来，给页面带来了生命的感觉。

没有必要强迫不想要的SVG进入页面标题--但是当适当地使用时，它们可以为布局添加一定的活力。

自定义向量背景

我们都听说过全屏图像视频背景在上升。这两种趋势已被广泛采用，以吸引人们对网页某些领域的关注。

自定义图形一直是流行的背景功能。不幸的是，并非所有的设计师都有技能来实现定制设计的图形.但是，随着免费教程和矢量编辑工具的兴起，创建动画矢量背景从来都不容易。

有些图形是为了与公司的品牌相融合，而另一些则是设计得更“逼真”。看一下主页克里夫布里奇.

首页部分使用明亮的橙色地图，分形元素跳跃到不同的国家。该动画旨在代表电子商务和互联网如何使它更容易购买任何东西在世界上任何地方。

有些人追求更多的审美背景来释放某种情绪。在布恩康像素主页，你会发现一个块，以平面矢量形状的形式的运动图形。

如果检查代码，就会发现这不是一个单一的图像，而是HTML代码中的一个完整的SVG元素。动画元素包含在不同的组，如摩天轮&热气球。

您可以想象设计和编码这个动画需要做多少工作。由于布恩康是一家数字创意机构，它很适合他们的投资组合。它还与他们的口号“漂亮的代码智能设计”相匹配。绝对值得付出努力(在这个设计师看来)。

另一个例子在技术上不是全屏的，但它是背景的一部分。Setosa是一个数据可视化站点，其中一页专门用于解释。为什么公共汽车聚集在一起？。有一个小范围的内容，并有一个动画轨道，以显示巴士如何移动。

从这些例子可以看出，SVG动画可以是美学的，甚至是教育性的。而背景是添加图形的完美方式，而不会占用页面上更多的空间。

APP演示和示例预览

每隔一段时间，你都会找到一个登陆页面，上面有软件的实时预览。其中许多演示都采用视频或屏幕截图的形式，而其他演示则是使用SVG创建的。

SVG演示的目的是展示程序是如何工作的。很明显，SVG不能包含很多细节，因此接口变得更简洁、更简单。正方形现金在他们的主页上有一个很好的例子。

SVG浏览器将显示站点的一些基本功能。这个动画解释了他们软件的用途，以及你可能使用它的原因。此外，您还会在页面的不同区域找到其他动画SVG，它们与相同的设计风格相结合。

内联是一个在线设计工具，有点像简化版的Photoshop。您可以与其他人共享您的设计，并将其保存在云中以便于访问。

在他们的主页上，你会看到一个使用SVG动画创建的快速演示模型。从鼠标光标到浏览器界面的所有内容都是独立的SVG元素。

这种效果主要适用于为桌面或web软件制作的登陆页面。它肯定不是无所不在的，但这是一种越来越受欢迎的趋势。

特色图标动画

SVG图标已经出现了一段时间，最近得到了大多数浏览器的支持。但特色的SVG图标也可以通过自己的动画或用户交互，如鼠标点击或悬停。

的主页上拉丝机你会发现三个SVG图标与功能排列。当你悬停在每个图标上时，你会注意到一个有趣的动画。在这种情况下，他们只动一次，但你可以设置动画，以任何你喜欢的方式。

真实形式与功能有一个不同的方法SVG图标动画。查看他们的服务页面并向下滚动到每个部分。

有几幅插图生动地描述了该机构提供的特征或特定服务。动画是通过滚动进入视图触发的，这也是一个独特的效果。

SVG&画布图标

高级web开发人员一直在测试帆布元件结合SVG动画。HTML<canvas>就像一个可以容纳多个SVG甚至位图图像的容器。

这允许开发人员在页面上以许多不同的方向动画化多个元素。以登陆页为例该死的宝贝。每个SVG都包含在一个画布元素中，以便更好地控制图标。

对大多数蚌埠设计师来说，这太过分了。在为2D/3D图形设计HTML 5游戏时，画布主要是有用的。但是随着这个规范的发展，我想我们会看到很多依靠画布的动画技巧。

现在，它只是SVG动画工具箱中的另一个工具。

SVG的未来

尽管大多数浏览器都支持SVG，但这仍然是一种势头正在增强的趋势。10多年前学会建立网站的设计师可能没有时间了解这些更新的方法。

典型的CSS 3动画仍然在获得吸引力，所以你可以想象CSS 3/SVG动画在真正走向主流之前还有几年的时间。但是，随着浏览器支持的增加和正在出现的设计趋势，毫无疑问，SVGS将成为Web运动图形的未来。