9款令人惊叹的HTML5 3D动画应用

更新时间:2014-11-11 09:58:04点击次数:782次

之前我们已经向大家分享了很多HTML5动画应用了,大部分都非常炫酷,也有一小部分是很实用的。今天我们要向各位HTML5动画爱好者介绍更多的HTML5 3D动画应用,希望大家能更加喜欢。


1、HTML5鲸鱼动画 又一款超酷HTML5动画


之前看到过同样效果的一款鲸鱼动画,不过可惜的是那个动画是用flash制作的。今天我找到了基于HTML5的鲸鱼动画,鲸鱼会随着鼠标的移动而游动,画面非常立体,鲸鱼也超级逼真。真的,HTML5确实很给力,HTML5动画完全可以完成flash能做的事情。


html5-whale


2、HTML5梦幻特效 可给任意元素添加魔幻效果


我们之前介绍HTML5动画特效比较多的是HTML5 3D特效,今天我们来换一种风格,来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素(图片、文字等)添加这么一种效果,即鼠标滑过时,元素上就会出现非常魔幻的动画特效,什么特效呢?你可以点开demo链接查看。


html5-magic-effect


3、HTML5 Canvas绘制灰太狼 超级可爱


HTML5 Canvas相当于一个画板,你可以在Canvas绘制任意的东西,今天要分享一款利用HTML5 Canvas绘制的灰太狼形象,个人以为,这个灰太狼绘制得十分逼真形象,小伙伴们都要惊呆了。以后我们再来弄一个HTML5 Canvas的喜洋洋如何?


html5-canvas-huitailang


4、HTML5 3D图片切片滑块旋转动画 超酷的HTML5 3D特效


先来说说怎么玩这款HTML5 3D图片动画特效,我们只需要在图片上面拖动鼠标,图片即会在垂直方向分裂出数块小长方体,然后每一个小长方体沿着鼠标拖动的方向旋转。这款HTML5 3D动画非常酷,它的实现离不开js动画框架TweenMax。


html5-3d-image-block


5、HTML5/CSS3 3D文字特效 文字立体可旋转


今天我们要分享一款效果挺不错的HTML5 3D文字特效,首先文字本身具有投影的立体效果,再加上文字的旋转摆动动画,就更显文字3D动感了。之前我们也分享过几款挺不错的HTML5文字特效,像HTML5/CSS3 3D文字特效 文字外翻效果,也具有3D的效果。


html5-css3-3d-text


6、纯CSS3绘制可爱的蚱蜢 还有眨眼动画


今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱,之前我们也分享过很多利用纯CSS3绘制的人物、动物等很有特点的效果,比如纯CSS3绘制可爱小男孩动画、纯CSS3 Android Logo动画绘制等。这款CSS3蚱蜢还有眨眼的动画,非常酷。


css3-grasshopper


7、HTML5像素粉碎图片动画 图片洒落一地


这款HTML5图片动画特效你绝对想不到,它将一张图片粉碎成许多像素颗粒,点击图片后,这些像素颗粒边掉落在地上,继续点击,粉碎的像素图片颗粒又会重新组合成完整的图片。用HTML5技术实现这种图片粉碎效果还是挺简单的,有兴趣的同学可以下载源码来学习。


html5-pixel-image-effect


8、用HTML5/CSS3给女朋友送个生日蛋糕


现在有了HTML5,我们在浏览器上制作动画已经不是什么难事了,但是一个好的创意却很难,比如说用技术来博得女孩子的喜欢。今天我们分享的这款生日蛋糕动画非常有创意,它是用svg来做的,利用HTML5的api让制作蛋糕的过程展示出来,这个蛋糕在妹子生日的时候送给她一定会让她觉得很惊奇。祝你成功哦!


html5-css3-new-cake


9、HTML5/CSS3奔跑动画 动画效果非常逼真


今天要分享一款很酷的模拟真人奔跑动画,它主要是利用HTML5/CSS3技术结合多张图片的切换来实现的。这款HTML5动画的逼真之处在于人物在奔跑的时候很有节奏感,而且有人物的投影。更重要的是当人物跑的越来越近是,人物的大小也会随之变大。很像一个小男孩从远处跑过来。


html5-boy-run-animation


最后欢迎大家分享和收藏,HTML5非常强大。


本文链接:http://www.html5tricks.com/9-wonderful-html5-3d-animation.html

本文作者:html5tricks – 超人

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息