标签归档:HTML5动画

基于P5.JS的HTML5文字遮罩粒子动画

这是一款基于P5.JS的HTML5文字遮罩粒子动画,HTML5实在是太强大了,许多文字动画和粒子动画都可以在Canvas上绘制实现。今天的这款文字粒子动画也是在Canvas上实现,依赖于P5.JS脚本库。文字作为遮罩层,文字内部产生五彩缤纷的粒子,非常大气。

html5-p5-js-text-particle

在线演示源码下载

HTML5 SVG实现老爷爷拄拐杖行走动画

这是一款基于HTML5和SVG的人物行走动画,图中使用SVG绘制出了一个拄着拐杖的老爷爷,描绘的活灵活现,可见目前SVG对绘图方面支持得也十分完美。另外我们又使用HTML5技术让这个老爷爷能够拄着拐杖一步步行走,这和之前我们分享的CSS3人物行走动画非常类似,怎么样,是不是很酷?

html5-svg-old-man-walking

在线演示源码下载

HTML5 Canvas下雨动画 可控制风向和雨水强度

今天我们要分享一款非常炫酷的HTML5 Canvas动画特效,这款动画主要是模拟了下雨的场景,雨滴从空中飘落,落在地上溅起水花,整个过程模拟得相当逼真。更重要的是,这款HTML5下雨动画还可以通过鼠标控制风向和雨水强度,鼠标左右滑动控制雨滴方向,鼠标上下滑动控制雨滴密度,大家可以在演示页面上试试。

html5-canvas-rain

在线演示源码下载

HTML5 WebGL绚丽五彩流体模拟动画

WebGL是目前最为流行的3D绘图协议,我们之前也分享过一款很酷的HTML5 WebGL水波模拟动画HTML5 WebGL粒子爆炸动画。这次我们要分享一款基于HTML5 WebGL的绚丽五彩流体模拟动画,我们可以在画布上点击鼠标,拖动鼠标后释放,即可看到不同色彩的流体从产生到消失的动画特效,看上去非常绚丽。

html5-webgl-fluid-animation

在线演示源码下载

HTML5 Canvas超炫酷3D烟花动画

今天要为大家展现一款非常绚丽的HTML5 Canvas 3D烟花动画,和之前分享的HTML5 Canvas可控制烟花速度和大小的烟花动画HTML5 Canvas随机色彩、高度和角度的烟花动画这两款相比,这个烟花动画是3D立体的,而且烟花燃放是带有立体的声音,看上去非常不错。

html5-canvas-3d-fireworks

在线演示源码下载

超炫酷HTML5 Canvas蝴蝶飞舞动画

还记得很早以前我们为大家分享过一款非常炫酷的HTML5蝴蝶3D动画,它是基于HTML5和SVG实现的。这次我们要再一次为大家介绍另外一款同样也很酷的HTML5 Canvas蝴蝶飞舞动画,蝴蝶是在Canvas上绘制而成,利用HTML5的动画特性实现蝴蝶的飞舞,大家可以学习一下。

html5-canvas-butterfly

在线演示源码下载

HTML5 WebGL粒子爆炸动画

之前我们分享过几款非常炫酷的HTML5粒子动画,比如这款HTML5像素粉碎图片动画HTML5 Canvas彩色像素进度条动画,都是利用了HTML5的粒子渲染特性实现。今天我们要分享另外一款基于HTML5和WebGL的粒子爆炸动画特效,效果非常令人震撼。

html5-webgl-particle-animation

在线演示源码下载

超酷逼真的CSS3 3D书本翻页动画

之前我们分享过好几款风格各异的jQuery书本翻页插件和HTML5书本翻页动画,有几个还是不错的,比如jQuery书本翻页3D动画特效HTML5 3D书本翻页特效。今天要分享的也是一款基于CSS3的3D书本翻页动画,目前这个动画不支持鼠标交互,只可以自动将页面打开和收拢。

css3-3d-book-flip

在线演示源码下载

HTML5 Canvas人物四肢模拟及身体碰撞动画

前几天我们刚刚为大家分享过一款基于HTML5的人物四肢关节伸展模拟动画,它可以模拟人物的头部、四肢伸展情况,相当逼真。今天要介绍的这款HTML5 Canvas动画在原来四肢模拟的基础上,添加了身体碰撞模拟的动画特效,我们用鼠标模拟一个大铁球,移动鼠标后将大铁球撞击人物的身体,人物身体受到作用力后就会按一定方向进行翻转活动,因此四肢也随着伸展和摆动。当然这种动画也应用了HTML5的重力感应特性。这种类似的动画以前也介绍过一些,比如HTML5图片相册重力感应特效

html5-canvas-person-collision

在线演示源码下载

HTML5点阵列局部放大镜动画特效

记得以前我们分享过一款很酷的HTML5 3D 粒子波浪动画特效,它由一连串点阵列组成,3D效果非常炫酷。今天要介绍的也是一个基于HTML5的点阵列动画特效,当鼠标滑过阵列时,阵列图的局部将产生放大镜的动画特效,也具有极强的3D立体视觉效果。

html5-dot-outline

在线演示源码下载