标签归档:HTML5动画

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

在线演示源码下载

纯CSS3实现超炫酷的萤火虫动画

今天要为大家带来一款很有意思的纯CSS3动画,这次我们要利用CSS3的一些动画属性来绘制一只闪闪发光的萤火虫,和之前分享的纯CSS3蚱蜢纯CSS3打火机类似,这只萤火虫也是用CSS3绘制,并且点击萤火虫可以关闭和打开它的翅膀,同时萤火虫的闪闪发光也可以控制。

css3-firefly

在线演示源码下载

CSS3实现五彩3D旋转星球

之前我们有分享过很多纯CSS3和HTML5实现的球体动画,比如这款HTML5 3D球体斑点运动动画HTML5 Canvas 地球旋转3D动画都非常不错。今天要给大家分享另外一款超炫酷的CSS3五彩3D旋转星球,旋转起来的视觉效果相当震撼。

css3-colorful-3d-ball

在线演示源码下载

CSS3响应式房子布局动画

在网页上绘制各种各样的图形非常方便,只要你对CSS3的高级属性足够的熟悉,就可以绘制出很多复杂的图形。今天我们要介绍一个利用CSS3技术绘制的房子图形,当然画一个房子非常简单,并没有什么复杂的东西,但是这个动画有趣的地方在于你可以动态调整房子的布局,它是一幢响应式的房子,可以动态调整房间的数量。

css3-responsive-house

在线演示源码下载

HTML5人物关节拉伸模拟动画

这是一款非常经典的HTML5模拟人物关节动画,画面中两个人手拉手,伴随着外力在不断地跳舞和移动,人物身体的每一个关节都随着运动收缩和伸展,动画模拟非常逼真。同时,你也可以在身体任意部位利用鼠标拖动施展外力,让人物运动更加剧烈,同时也可以随时改变运动方式和力度。

html5-person-joint

在线演示源码下载

CSS3僵尸从墓穴爬出来的动画特效

还记得很早的时候我们给大家分享过一款CSS3僵尸行走动画吗?动画效果十分逼真。这次要给大家分享另外一款有关僵尸的CSS3动画,这款动画利用了CSS3特性绘制了一只僵尸从墓穴出来时的特效,应该是从植物大战僵尸游戏中模仿过来的。

css3-zombie-from-grave

在线演示源码下载

CSS3绘制可爱的猫头鹰 眼睛会转动

之前我们分享过很多基于纯CSS3的绘制动画效果,比如这款纯CSS3实现大象走路动画纯CSS3绘制可爱的蚱蜢,效果都非常不错。今天要分享的这款也是基于纯CSS3可爱的猫头鹰动画,移动鼠标猫头鹰的眼睛还会转动,非常逼真。

css3-owl

在线演示源码下载