7 款震撼的 HTML5 动画应用及源码

15顶
0踩

2014-07-02 10:13 by 见习编辑 html5_dev 评论(8) 有27993人浏览

html5 css javascript 前端

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

今天我们精选了7款基于HTML5、Canvas以及CSS3的动画特效，同时也提供源代码，一起来看看吧。

1、HTML5 Canvas模拟衣服撕扯动画

这是一款基于HTML5 Canvas的模拟衣服撕扯动画，效果非常逼真。刚开始衣服挂在绳子上，用鼠标拖拽衣服即可让衣服摆动起来，当你拖拽的很用力时，你会发现，衣服被撕破了。该HTML5动画会捕获到鼠标拖拽的用力程度，从而来判断并实现衣服应该破损的程度，越用力，衣服被撕破的速度越快，赶紧来体验一下这个HTML5动画吧。

在线演示 / 源码下载

2、CSS3 3D 分页导航按钮

这是一款用 CSS3 实现的 3D 分页导航按钮，这款CSS3 3D分页插件同样具有分页页码和数字页面，不同的是，这款分页插件的分页页码是一个个3D的导航按钮，样式十分新颖，不过需要CSS3支持。

在线演示 / 源码下载

3、HTML5 3D 卡片视频播放器，超立体视觉

这是一款基于HTML5的视频播放器，不过你一眼看上去，它并不像一款播放器，而是一张张3D立体的卡片，没有播放按钮，没有音量设置。不过它的特色就是把HTML5视频播放器嵌入到卡片里面，然后这些卡片可以和用户互动，并产生HTML5 3D的效果，非常不错的创意。点击卡片即可播放视频。

在线演示 / 源码下载

4、HTML5粘浏览器的小泥块，超级可爱动画

这款HTML5动画非常可爱，动画的主角是一款粘人的小泥块，用鼠标拖动泥块，泥块即可粘住浏览器，让后一点点掉落下来。而完成这样的HTML5动画，我们只需一张图片和一系列CSS3代码即可。虽然这款动画实用性并不强，但是其中的HTML5原理值得大家学习。

在线演示 / 源码下载

5、jQuery/CSS3带当前时间的日历插件

网页上日历插件应用非常广泛，尤其是在个人空间和博客上，就需要更多个性化的日历插件了。这款jQuery/CSS3日历插件很个性化，尤其是它带有当前时间的特点，这样除了星期、日期，你还可以看本地时间，功能十分强大的jQuery日历插件。