标签归档:HTML5动画

HTML5 Canvas爱心表白动画特效

在很久以前,我们给大家分享过一款浪漫程序员 HTML5爱心表白动画,很多读者都表示非常震撼。这次我们同样再分享一款基于HTML5 Canvas的爱心表白动画特效,从视觉上看,它也是一个爱心轮廓,但是不同的是这个爱心轮廓由许多跳动的小爱心组成,更加有一种3D立体的效果,程序员的你就拿去用吧。

html5-canvas-heart-love

在线演示源码下载

HTML5 Canvas发光的流体粒子动画

之前我们分享过很多基于HTML5 Canvas的粒子动画,大部分的效果都非常炫酷,有些还呈现3D的视觉效果。这次给大家带来另外一个很有特点的HTML5 Canvas粒子动画,它既可以看作是流体动画,又可以看作是粒子动画,同时在黑色背景的衬托下,流体粒子还会出现发光的动画特效。

html5-canvas-fluid-particle

在线演示源码下载

HTML5 Canvas 3D螺旋线条动画

很早以前,我们分享过一款2D平面的DNA螺旋动画,主要使用了一些数学正弦余弦公式。今天我们分享另外一个螺旋线条动画,它是基于HTML5 Canvas的,与之前不同的是,它有3D的视觉效果,并且更强大的地方是可以动态修改一些参数来改变螺旋线条的形状。同时,螺旋线条的颜色还会根据鼠标移动的不同角度而改变。

html5-canvas-3d-spiral-line

在线演示源码下载

HTML5 Canvas鼠标移动网格粒子发光动画

近期我们分享了很多关于HTML5 Canvas的炫酷动画,大部分都是粒子相关动画,比如这款HTML5 Canvas鼠标滑过粒子挤压动画HTML5 Canvas 3D绿色粒子动画都非常不错。这次要介绍的同样是一款基于Canvas的HTML5粒子动画,粒子组成一个网格形状,鼠标在网格中移动时,网格粒子跟随鼠标移动,而且鼠标周围将会发光。

html5-canvas-focus-grid

在线演示源码下载

HTML5 Canvas鼠标滑过粒子挤压动画

粒子动画一直是HTML5 Canvas动画中比较常见的一种,很多开发者也比较喜欢做这一类的动画特效。这次给大家带来一款基于HTML5 Canvas的鼠标滑过粒子挤压动画,页面上有很多粒子点组成一款画布,当你将鼠标滑过这块画布时,粒子之间便相互挤压,让你的鼠标无法触碰这些粒子点。

html5-canvas-extrusion

在线演示源码下载

HTML5 Canvas 3D绿色粒子动画

HTML5 Canvas技术已经不是什么新鲜的东西了,在canvas上我们不仅可以结合SVG来绘制各种路径动画,而且更出色的地方在于我们可以结合JavaScript生成很多炫酷的3D动画效果。这次我们给大家分享一款基于HTML5 Canvas的3D绿色粒子动画,效果和之前介绍的HTML5 Canvas和SVG实现的五彩万花筒动画比较类似。但是缺陷在于这个动画在某些版本的chrome上运行比较卡顿。

html5-canvas-3d-green-particle

在线演示源码下载

HTML5 Canvas金色漩涡动画

HTML5动画技术在Canvas上得到了充分的发挥,我们之前也分享过很多基于HTML5 Canvas的动画特效,比如最近分享的HTML5 Canvas雾状火焰动画。这次我们给大家带来另外一款超炫酷的HTML5 Canvas金色漩涡动画,漩涡中不停旋转的水波非常的逼真。

html5-canvas-golden-swirl

在线演示源码下载

HTML5房屋装饰工具 自定义房屋各个部位

这是一个基于HTML5和CSS3的房屋装饰工具,工具为房屋的各个部位提供了不同的材料和颜色,点击相应的材料即可将对应部位的材料切换成所选的。这个工具有点类似人物形象换装工具,可以更换人物每个部位的穿着。另外这个工具的知识点在利用CSS3实现3D的动画特效,当你移动鼠标时你可以看到房屋的各个侧面情况。

html5-house-decorator

在线演示源码下载

HTML5 Canvas 五彩发光喷泉动画

前几天我们为大家分享过一款很酷的HTML5 Canvas火焰动画,一起见证了Canvas的强大。这次要分享的这款动画也是基于Canvas实现的,它是一个五彩的发光喷泉动画特效。页面上一共有4个喷泉柱子,并且每个柱子都有在水面上的倒影,喷射出五彩斑斓的喷泉,同喷泉的颜色会随机变化,非常炫酷。

html5-canvas-fountain

在线演示源码下载

HTML5 Canvas雾状火焰动画

我们可以在Canvas上绘制很多图形,也可以利用HTML技术在Canvas上制作一些复杂的动画,之前我们也分享过一些基于HTML5 Canvas的火焰动画,例如这个HTML5 Canvas幻彩火焰文字特效和更早以前分享的HTML5 Canvas火焰燃烧动画。这次我们给大家带来另外一款基于HTML5 Canvas的火焰动画,你可以在Canvas画板上用鼠标点击拖动,便会形成雾状的火焰效果,火焰就像雾霾一样逐渐扩散开来。

html5-canvas-fog-fire

在线演示源码下载