绝对震撼 7款HTML5动画应用及源码_最新动态_新闻资讯_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 新闻资讯 > 最新动态 > 绝对震撼 7款HTML5动画应用及源码

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

 2014/7/2 10:27:52    程序员俱乐部  我要评论(0)
  • 摘要:关于HTML5动画,我们已经分享太多了,当然也有很多利用纯CSS3实现的动画效果。今天我们精选了7款基于HTML5、Canvas以及CSS3的动画特效,同时也提供源代码,一起来看看吧。1、HTML5Canvas模拟衣服撕扯动画超级逼真今天又要来推荐一款HTML5Canvas动画,是一个模拟衣服撕扯动画,效果非常逼真。刚开始衣服挂在绳子上,用鼠标拖拽衣服即可让衣服摆动起来,当你拖拽的很用力时,你会发现,衣服被撕破了。该HTML5动画会捕获到鼠标拖拽的用力程度,从而来判断并实现衣服应该破损的程度
  • 标签:源码 应用 HTML5
class="topic_img" alt=""/>

  关于 HTML5 动画,我们已经分享太多了,当然也有很多利用纯 CSS3 实现的动画效果。今天我们精选了 7 款基于 HTML5、Canvas 以及 CSS3 的动画特效,同时也提供源代码,一起来看看吧。

  1、HTML5 Canvas 模拟衣服撕扯动画超级逼真

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

html5-cloth-tear

  在线演示        源码下载

  2、CSS3 3D 分页导航按钮

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

css3-3d-pagination

  在线演示        源码下载

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

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

html5-3d-card-video

  在线演示        源码下载

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

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

  在线演示        源码下载

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

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

jquery-css3-datepicker-time

  在线演示        源码下载

  6、CSS3 垂直进度条动画数字百分比显示

  这次我们要来分享一款 CSS3 进度条动画,这款进度条是垂直放置的,在进度加载的时候,进度条的背景会出现一个快速移动的箭头动画,并且随着进度条的移动,数字百分比也将随着进度实时更新,直至进度完成,完成后进度条颜色由红色编程绿色。

css3-ver-progressbar-number

  在线演示        源码下载

  7、HTML5 Canvas 3D 倒计时爆炸特效

  今天要分享的这款 HTML5 3D 动画特效非常给力,它是一个基于 Canvas 的倒计时爆炸效果,随着时间的走动,时间数字傍边就会有爆炸的特效,一群像素点就会在数字中心爆发出来,感觉非常酷。而且应用了 HTML5 的 3D 特性,让整一个时钟显得非常有立体感。

html5-<a href=canvas-3d-explod-clock" width="588" height="273" />

  在线演示        源码下载

  以上就是 7 款效果震撼的 HTML5 动画应用及源码,欢迎收藏分享。

发表评论
用户名: 匿名