标签归档:HTML5动画

HTML5圣诞礼物大炮发射3D动画

今天给大家带来一款基于HTML5的圣诞礼物大炮发射动画,这个动画主要是构造了一个3D的卧室场景,我们通过点击鼠标让一门大炮可以源源不断地发射各种各样的圣诞礼物,并且伴随大炮发射的声音,显得非常逼真有趣。这个HTML5动画主要算法是一些物体的碰撞检测,以及物体碰撞时的运动方向计算,对开发者的数学功底要求还是比较高的,有兴趣的朋友可以学习一些动画的JS代码。

html5-christmas-cannon

在线演示源码下载

HTML5 Canvas粒子螺旋线条3D动画

今天给大家带来一款效果很酷的HTML5 Canvas动画,它由几个基本动画组成,一个是粒子动画,另一个是螺旋动画。首先是在canvas画板上将像素粒子组合成一个螺旋形线条,然后用JavaScript让粒子运动起来,在视觉上形成螺旋线条波动的动画特效。

html5-canvas-spiral

在线演示源码下载

HTML5 Canvas柳枝随风飘摇动画

这是一款用HTML5 Canvas模拟的柳树随风飘摇的动画特效,首先柳枝和柳叶的模拟通过CSS实现,虽然不是很逼真,但是这并不是这个动画的重点。重点在于我们将鼠标滑过柳枝时,就像微风拂过一般,将柳枝和柳叶飘摇起来,这中间大家可以学习如何用HTML5技术在Canvas画板上实现动画。

html5-canvas-willow-swing

在线演示源码下载

基于TweenMax的HTML5 3D爱心破裂动画

TweenMax是GreenSock动画平台的核心插件,GreenSock是一套用于在所有主流浏览器中制作高性能HTML5动画的工具。今天给大家分享一款基于TweenMax的HTML5 3D爱心动画,它和之前分享的爱心动画不同在于,点击爱心后爱心会破裂,在点击爱心又会重新组合。

tweenmax-html5-3d-heart-break

在线演示源码下载

HTML5 Canvas 3D环形方块翻转动画

之前我们有给大家分享过一系列的HTML5 3D立方体动画,有很多效果都还不错的,比如这个HTML5/CSS3 3D魔方动画就很厉害,这应该是方块效果中最复杂的了。今天给大家带来的这款方块动画是基于HTML5 Canvas的,它的特点是许多个方块围成一个环形,每个方块不停地旋转,同时你也可以拖拽鼠标来看环形方块的不同视角。

html5-canvas-3d-circle-cube

在线演示源码下载

HTML5骏马奔跑动画

今天给大家分享一个非常新颖的HTML5动画,它是一匹骏马,在疾风中飞驰。马的外观是在Canvas上绘制而成,同时骏马在奔跑的时候从地面上飞溅上来很多泥土,这让骏马奔跑的效果更加逼真,这个动画可以改进的地方是可以利用CSS3将骏马的面部、身体等部位描述的更加具体一点,比如添加眼睛、马鞍之类的元素。

html5-horse-animation

在线演示源码下载

基于Three.js和HTML5 Canvas的3D水晶球体

今天给大家分享一个很酷的HTML5 Canvas 3D动画,它同样是一个基于Three.js制作的动画特效。在Canvas上有一个用许多长度各异的水晶柱形组成的球体,我们还可以用鼠标拖拽球体来从不同角度观察球面,还可以用鼠标滚轮来缩放球面。还有一个特性就是,双击球面可以改变水晶面的颜色,同时水晶面上会随着旋转的角度出现亮光,更加凸显出其3D立体的视觉效果。

threejs-canvas-3d-crystals

在线演示源码下载

HTML5 Canvas火焰跟随鼠标动画

今天给大家分享一个效果很棒的HTML5 Canvas动画,它是一个火焰动画,这与我们之前分享的HTML Canvas火焰画笔动画类似,也是在Canvas上通过鼠标绘制而成。这个火焰动画会不停地跟随鼠标移动,如果你有一个游戏方面的宣传网页,那么这个动画可以用在鼠标移动上,应该是比较酷的。

html5-canvas-fire-mouse

在线演示源码下载

基于Three.js的碰撞检测穿马路动画

Three.js是JavaScript编写的WebGL第三方库,提供了非常多的3D显示功能。今天要给大家分享的就是一款基于Three.js的穿马路游戏动画,主要使用了Three.js的碰撞检测功能,马路上穿梭着很多车辆,你可以通过方向键控制小方块的行进方向,顺利通过马路,如果方块和行驶的车辆发生碰撞,则游戏结束。

threejs-impact-checking

在线演示源码下载

HTML5/SVG图片切换马赛克过渡动画

早些时候,我们给大家分享过一款基于HTML5 Canvas的图片马赛克模糊效果,并且文章中对其实现原理进行了简单解说。今天我们要介绍的也是关于图片马赛克效果的,它是一个基于HTML5和SVG的图片切换马赛克过渡动画,与普通的淡入淡出切换效果不同,它在图片切换时渲染马赛克的滤镜效果,实现简单,而且也非常具有创意。

html5-svg-image-pixelization

在线演示源码下载