SVG是HTML的扩展标记语言，利用SVG可以做非常多的矢量动画，结合HTML5，SVG就变得更加强大。下面12款HTML5动画均基于SVG，一起来看看。
1、HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷
这次我们要分享的这款HTML5动画简直就是逆天，利用SVG制作的3D蝴蝶飞舞动画，蝴蝶飞舞动画非常逼真，蝴蝶飞舞的路线是利用SVG构造的。另外，动画使用了一张立体感很强的天空背景图，让蝴蝶飞舞时更加显得立体逼真。
2、一组HTML5 SVG可爱的笑脸动画
今天我们来分享一组利用HTML5和SVG实现的可爱笑脸动画，它们是色彩各异的一组泥娃娃的脸，默认的时候就出现眨眼和微笑的动画，当你把鼠标滑过它们时，就像是感受到了主人的抚摸一样上下跳动起来，真的是非常可爱。
3、HTML5 SVG圆盘时钟动画 5种时钟样式
今天我们要来分享一款基于HTML5和SVG的圆盘时钟动画，首先，圆盘时钟的时间是和你的本地时间同步的，因此，你完全可以用它来看上网时间。另外，这款HTML5圆盘时钟提供了5中不同的盘面样式，有带刻度的和不带刻度的，还挺实用的。
4、一套HTML5/SVG表情图标 表情超可爱
这次我们要来向大家分享一款超级可爱的HTML5/SVG表情图标，一共有12组不同的表情，这些表情都是利用SVG Path绘制而成，对SVG熟悉的朋友应该觉得比较简单，但是这些表情的创意确实非常不错，你可以将这些svg表情应用到你的博客上去，非常可爱。
5、HTML5 SVG小马奔跑动画 相当大气
今天我要来向大家分享一款超级酷的HTML5动画，它是一只快速奔跑的狐狸，奔跑的动作非常自然逼真，长长的狐狸尾巴也会随着摆动。另外，这款HTML5狐狸奔跑动画也是基于SVG的，前面我们也介绍过很多哦SVG的动画效果，可见SVG在动画制作上也有很大的优势。
6、HTML5 SVG多折线图表 图表可缩放显示
今天我们要来介绍一款基于HTML5 SVG的折线图表，该款图片支持多条折线重叠在一起显示，可以方便地比较不同颜色折线的数据。另外图表还有一个特点，就是可以缩放和移动，这大大方便了用户浏览图表数据，非常人性化。更多图表应用，请移步至HTML5图表栏目。
7、CSS3/SVG质感背景小图标 镂空效果图标按钮
之前我们分享过很多利用CSS3制作的图标小按钮，比如一些分享按钮，如纯CSS3社会化分享按钮，还有一些带小图标的CSS3菜单，如HTML5/CSS3滑块动画菜单 图标动画很酷。今天我们来分享一款用CSS3和SVG实现的质感背景小图标，鼠标滑过图标时出现镂空的效果，并且有质感背景的描边，效果非常不错。
8、HTML5 SVG Tab滑块菜单 非常酷的Tab菜单
之前我们分享过很多HTML5/CSS3菜单，应该说大部分都还比较实用华丽，今天我们要来分享另外一种形式的HTML5菜单——HTML5 Tab菜单。这款Tab菜单是利用HTML5和SVG实现的，Tab菜单的外观非常漂亮，而且Tab切换也很方便。
9、HTML5/SVG实现随风摇摆的动画树
今天的这款HTML5动画非常有特点，它是一棵随风摇动的树，但是这棵树是模拟出来的，外观并不是那么逼真，只是树的骨架出来了。树的结构由SVG描述而成，之前我们也介绍过过许多关于SVG的动画特效，比如HTML5 SVG多折线图表。
10、HTML5/SVG线性图表 可绘制图表区域颜色
今天要分享的这款HTML5图表应用是一款线性图表，它主要是有SVG构造出来的，这款SVG线性图表可以用不同的颜色绘制出图表的数据区域。另外，这款图表和之前分享的HTML5线性图表iGrapher 类似，只是功能没那么强大而已。
11、HTML5/SVG实现过山车动画
今天我们要分享一款很酷的HTML5/SVG动画，这款HTML5动画是过山车效果，主要是利用了SVG的path动画来实现的，效果非常酷。另外，关于更多SVG方面的动画，大家可以看看这款HTML5 SVG狐狸奔跑动画、HTML5/SVG实现随风摇摆的动画树，也都非常不错。
12、HTML5 SVG仿iPhone拍照快门效果
这是一款很酷的拍照快门特效，它利用了HTML5和SVG的特性仿制了类似iPhone拍照应用的快门效果。该HTML5快门的外观非常漂亮，边线有六种不同的颜色组成，当按下快门时，就可以出现像iPhone拍照应用的那种效果了。
以上就是12款基于SVG的HTML5应用和动画，欢迎收藏分享。
您还没有登录,请您登录后再发表评论