标签归档:HTML5动画

HTML5/SVG实现过山车动画

今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷。另外,关于更多SVG方面的动画,大家可以看看这款HTML5 SVG狐狸奔跑动画HTML5/SVG实现随风摇摆的动画树,也都非常不错。

html5-svg-shanche-animation

在线演示源码下载

HTML5 SVG狐狸奔跑动画 相当大气

今天我要来向大家分享一款超级酷的HTML5动画,它是一只快速奔跑的狐狸,奔跑的动作非常自然逼真,长长的狐狸尾巴也会随着摆动。另外,这款HTML5狐狸奔跑动画也是基于SVG的,前面我们也介绍过很多哦SVG的动画效果,可见SVG在动画制作上也有很大的优势。

html5-svg-fox-run-animation

在线演示源码下载

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

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

html5-boy-run-animation

在线演示源码下载

HTML5/SVG实现随风摇摆的动画树

今天的这款HTML5动画非常有特点,它是一棵随风摇动的树,但是这棵树是模拟出来的,外观并不是那么逼真,只是树的骨架出来了。树的结构由SVG描述而成,之前我们也介绍过过许多关于SVG的动画特效,比如HTML5 SVG多折线图表

css3-breathing-tree

在线演示源码下载

纯CSS3实现自行车动画 非常逼真

还记得那款纯CSS3实现的小猪、老鼠、小牛吗,简直是太形象生动了。这次我们要来分享一款利用纯CSS3实现的自行车动画,与前面那款不同的是,这个自行车是可以运动的,就像有一个人在骑车一样,车轮也会转动,非常逼真的一款动画效果。

html5-css3-bike-animation

在线演示源码下载

HTML5 Canvas火焰闪烁动画 火焰跟随鼠标

之前我们分享过一款HTML5 Canvas火焰喷射动画效果,它可以让你的屏幕上到处飞满火球,效果很酷。今天我们来分享一款HTML5火焰闪烁动画,也是基于Canvas的,火焰上下窜动的效果非常逼真,并且,火焰可以跟随鼠标移动,是一款非常炫的HTML5 Canvas动画。

html5-canvas-fire-animation

在线演示源码下载

HTML5 3D正方体特效 可任意面旋转定位

之前对于HTML5立方体动画我们已经有过不少分享了,像这款HTML5/CSS3 3D立方体扭曲动画HTML5 3D立方体旋转动画都非常不错。今天我们要介绍的这款HTML5 3D立方体动画的特点是可以定位立方体的任意面,同时也可以在不同的方向上旋转。

html5-cube-any-face

在线演示源码下载

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

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

html5-3d-image-block

在线演示源码下载

HTML5 TweenMax.js和jQuery实现的3D图片动画 可多角度旋转

TweenMax是一个很常用的动画制作框架,TweenMax.js是TweenMax的JS版本,今天我们就结合TweenMax.js和HTML5来实现一款超炫的3D图片墙动画,几张图片围成一个围墙,然后图片墙可以随着鼠标的移动而旋转,旋转速度可以根据鼠标来变化,非常酷的HTML5 3D动画应用。

html5-3d-carousel

在线演示源码下载

纯CSS3实现咖啡制作全过程动画特效

之前我们用纯CSS3制作过很多效果不错的动画,比如HTML5/CSS3工厂流水线动画特效用HTML5/CSS3给女朋友送个生日蛋糕等。今天我们要再来分享一款利用纯CSS3实现的咖啡制作全过程动画特效,从把咖啡豆导入杯子,到把咖啡煮好,整个动画还比较流畅。

html5-coffee-maker-animation

在线演示源码下载