分类目录归档:HTML5应用

HTML5 Canvas水波纹动画特效

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

html5-canvas-water-ripples

在线演示源码下载

超绚丽CSS3多色彩发光立方体旋转动画

之前我们分享过几个不错的CSS3立方体动画,比如这款HTML5 3D立方体旋转动画HTML5 3D立方体图片切换动画。今天要分享的也是一款基于CSS3的3D立方体旋转动画,不同的是,这款立方体的每一个面都有不同的色彩,并且会带有绚丽的发光特效。

css3-shine-cube

在线演示源码下载

纯CSS3环形菜单动画 可展开二级子菜单

网页菜单是一个网站最主要的部分之一,之前我们分享过很多形态各异的jQuery/CSS3菜单,有炫酷的CSS3/jQuery创意盒子动画菜单,也有实用的CSS3多级下拉菜单 弹性展开下拉动画。今天要给大家分享一款富有创意的CSS3环形菜单,当我们将鼠标滑过菜单项时,即可以圆环的形式展开二级子菜单,效果非常不错。

pure-css3-circle-menu

在线演示源码下载

纯CSS3红色爱心跳动动画

之前我们分享过一些基于纯CSS3的爱心动画,最酷的非浪漫程序员 HTML5爱心表白动画这个莫属,另外还有这个HTML5 3D爱心动画也非常不错。今天要给大家带来一个纯CSS3的红色爱心跳动动画,爱心的形状是利用纯CSS3绘制出来的,结合CSS3的动画属性实现跳动的动画特效。

pure-css3-heart

在线演示源码下载

CSS3图片层叠弹性动画

之前我们分享过很多非常炫酷的CSS3和HTML5图片层叠切换动画,比如CSS3/jQuery实现移动端滑动图片层叠效果jQuery多张图片上下叠加切换插件。今天我们要分享的是一款基于CSS3的图片层叠弹性动画,当我们将鼠标滑过图片时,图片就会展示层叠的视觉效果,并且会以弹性的动画方式放大图片,效果非常不错。

css3-image-stack-elasticity

在线演示源码下载

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

在线演示源码下载