标签归档:HTML5动画

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

在线演示源码下载

纯CSS3绘制可爱的神奇宝贝

CSS3非常强大,之前我们还介绍过很多基于纯CSS3的动画特效,比如纯CSS3绘制的旺仔头像动画,非常可爱。今天我们要为大家分享一款纯CSS3绘制可爱的神奇宝贝动物形象,特别的是,它还会眨眼、摇尾等表情,非常逼真。

css3-pokemon

在线演示源码下载

HTML5 3D 魔方日历动画 3种不同日历风格

之前我们分享过很多款样式各异的jQuery和HTML5日历控件,但今天要介绍的这款日历控件绝对是超炫酷的,它非常富有创意,利用了HTML5的3D特性实现了魔方的日历动画控件,每一个日期就是一个小的魔方立方体,鼠标滑过日期时,立方体就会旋转,点击日期时,就会展示当前日期的行程安排。另外更酷的是,插件一共提供了3种不同的日历样式。

html5-3d-calendar

在线演示源码下载

HTML5 SVG 世界地图旋转动画

这是一个以世界地图为背景的简易地球仪,通过HTML5和SVG的相关特性,实现了这个世界地图地球仪的旋转动画。地图旋转期间,会有飞机在地图上自由飞行,这样让这个动画更加逼真。与此相关的另外一个HTML5 Canvas 地球旋转3D动画也是非常的不错。

html5-word-map-rotate

在线演示源码下载

HTML5文本输入框粒子动画特效

这次我们要为大家来分享一个非常炫酷的HTML5动画特效,它是一个输入框,当您在输入框输入文字的时候,输入框中就会出现很漂亮的粒子动画特效,并且输入框的四周边框将会出现发光的效果,效果很不错。

html5-text-input-animation

在线演示源码下载

HTML5 Canvas 圆形时钟动画

前不久我们刚为大家分享过一款很不错的jQuery/CSS3带数字时钟的圆盘时钟,效果很不错。今天我们要继续为大家介绍另外一个基于HTML5 Canvas的圆形时钟动画。它的功能非常简单,就是一个简单的时钟,时针分针和秒针的颜色各不相同。

html5-canvas-circle-clock

在线演示源码下载

HTML5 SVG 绘制唐老鸭卡通形象

利用CSS3可以绘制很多人物和动物形象,比如之前介绍的纯CSS3绘制可爱小男孩动画纯CSS3绘制可爱的蚱蜢,可见CSS3十分强大。这次我们要介绍的是利用HTML5和SVG来绘制的唐老鸭卡通形象,SVG的path特性非常灵活,可以让你绘制任何路径。

html5-svg-donald-duck

在线演示源码下载