分类目录归档:HTML5应用

HTML5 Canvas 梦幻数生长动画

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

html5-canvas-dream-tree

在线演示源码下载

纯CSS3 Loading加载动画 多组超炫酷风格

之前我们为大家分享过很多款炫酷和实用的CSS3 Loading加载动画,比如这款CSS3实现的火柴燃烧Loading加载动画5个可爱的CSS3 Loading加载动画。今天要分享的同样是一款基于纯CSS3的Loading加载动画,与其他Loading动画不同的是,它有很多种动画风格,你可以根据自己的喜好和实际项目选择一款加以应用。

css3-loading-cool-styles

在线演示源码下载

纯CSS3实现可爱的表情动画

CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画。一共有7组表情动画,我们可以在文章底部将这些表情用作读者看完文章的心情。

css3-expression-animation

在线演示源码下载

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

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

html5-canvas-electrocardiogram

在线演示源码下载

HTML5简易版仿超级玛丽小游戏

还记得之前给大家分享过的一款HTML5超级玛丽小游戏吗?这款游戏非常逼真的用HTML5重写了超级玛丽这款经典游戏。今天要分享的也是一款基于HTML5的游戏应用,它是一款仿超级玛丽的简易版游戏,游戏中用简单的符号替代了超级玛丽任务,游戏中个各种场景也做了简化,但是实现原理还是相似的,方便开发者学习。

html5-simple-mario

在线演示源码下载

CSS3/SVG实现鼠标滑过3D展开文字描述图层

现在很多HTML5动画都会结合SVG来制作,因为SVG可以更方面地描述界面图形元素。今天要介绍的一款动画就是利用CSS3结合SVG实现的,它可以让我们在鼠标滑过图片时,通过3D立体的视觉效果展示文字描述图层,动画效果非常绚丽。

css3-svg-hover-3d-layer

在线演示源码下载

HTML5 Canvas粒子数字时钟动画

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

html5-canvas-pixel-clock

在线演示源码下载

HTML5 Canvas 圆形进度条 显示数字百分比

记得以前为大家分享过很多样式各异的进度条插件,有基于jQuery的,也有基于HTML5和CSS3的。这次我们要介绍另外一款基于HTML5 Canvas的圆形进度条应用,在黑色的背景下,白色的进度条显得格外显眼,而且圆形中央会实时显示当前进度的数字百分比,非常实用。

html5-canvas-circle-percentage

在线演示源码下载

CSS3实现3D卡通文字效果

之前我们介绍过很多基于jQuery和CSS3的文字动画特效,比如HTML5/CSS3发光文字 可自定义文字色彩就非常炫酷。今天要分享的是一款基于CSS3的3D卡通文字效果,文字呈现的是3D立体的视觉效果,鼠标滑过文字时会出现晃动的动画效果。

css3-3d-kartoon-text

在线演示源码下载

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

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

html5-canvas-beam-explosion

在线演示源码下载