标签归档:HTML5动画

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

在线演示源码下载

HTML5 Canvas水波纹动画特效

HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效。以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让人惊叹不已,这次分享的HTML5 Canvas水波纹动画同样非常震撼人心。

html5-canvas-water-ripples

在线演示源码下载

HTML5 Canvas 水母游动动画特效

这是一个非常酷的HTML5动画特效,它是一只游动的水母,我们利用HTML5的Canvas技术绘制一只像素点组合的水母,并且利用JavaScript模拟水母游动的动画特效,看上去非常逼真。

html5-canvas-jellyfish

在线演示源码下载

HTML5 Canvas 梦幻树生长动画

今天我们要为大家分享一款基于HTML5 Canvas的动画特效,它是一颗逐渐生长的梦幻大树,生长过程中树枝将会产生随机的色彩,让整一棵大树显得非常具有梦幻的效果。本实例利用了HTML5 Canvas的动画技术,实现了渐变式动画的特效。

html5-canvas-dream-tree

在线演示源码下载

HTTML5 Canvas心电图动画 可多参数控制

今天要给大家分享另外一个超炫酷的HTML5 Canvas动画,它是一个心电图动画效果,程序运行时就会模拟心电图在屏幕上打印当前心跳信息。同时动画中带有一些开关按钮来控制心电图中的各个参数,动画相当逼真。

html5-canvas-electrocardiogram

在线演示源码下载

HTML5 Canvas粒子数字时钟动画

还记得我们之前分享的几款HTML5粒子动画特效吗?比如这款HTML5文本输入框粒子动画特效HTML5 Canvas生成粒子效果的人物头像,效果都非常炫酷。今天我们要给大家介绍的也是一款基于HTML5 Canvas的粒子数字时钟动画,时钟会读取本地时间,并且每变化一次均会出现粒子动画效果,这款粒子数字时钟非常适合在你的个性化博客中使用。

html5-canvas-pixel-clock

在线演示源码下载

HTML5 Canvas 随机色彩光束爆炸动画特效

今天我们要给大家分享一款非常炫酷的HTML5 Canvas光束爆炸动画特效,它就像一朵光速爆炸开一样,动画效果非常绚丽。点击鼠标时,可以随机切换光速的颜色,当然你也可以在页面上放几个按钮,通过点击按钮来指定某一种颜色的光束。

html5-canvas-beam-explosion

在线演示源码下载