标签归档:HTML5 3D

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

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

html5-canvas-3d-circle-cube

在线演示源码下载

HTML5 Canvas烟花绽放庆祝活动场景

前段时间,我们分享过几个基于HTML5 Canvas的烟花动画,例如这个2D平面的烟花动画,也是基于HTML5 Canvas的;同样的另外一个基于3D带音效的烟花燃放动画效果也非常炫酷。这次我们分享的另外一款基于HTML5 Canvas的烟花绽放动画的特点是,除了可以播放烟花动画,而且还可以用粒子动画的方式显示文本,例如公司名字,这样更是渲染了庆祝的氛围。

html5-canvas-fireworks-celebrate

在线演示源码下载

HTML5和CSS3实现的自定义3D滑杆控件

之前我们分享过一些比较有意思的滑杆控件,比如这款基于VueJS的滑块组件就非常不错。滑杆这种控件一般用在范围选取上面,比如结合图表生成一定范围的数据。今天我们分享的这个滑杆控件自定义程度非常高,特别是使用了CSS3的3D特性,让整一个滑杆控件效果更加炫酷。

html5-css3-3d-slider

在线演示源码下载

jQuery/CSS3 3D旋转盒子动画 可自定义封面图片

在没有CSS3之前,我们只能在网页上实现2D平面动画,但是随着CSS3技术的普及,我们可以很方便的在网页上实现一个3D立方体。今天给大家带来的便是一个基于jQuery和CSS3的3D立方体盒子,我们可以通过鼠标拖拽浏览盒子的每一个面,另外,3D盒子的面都可以自定义封面图片,你可以为每一个面选择不同的图片,并还可以自定义盒子的尺寸大小。

jquery-css3-3d-image-box

在线演示源码下载

HTML5 Canvas 3D天体运行动画

今天我们要给大家分享一款基于HTML5 Canvas的3D星球天体运行动画,这里我们在Canvas画布上绘制了一颗较大的星球,然后在大星球周围有一圈很小的陨石区域,这些陨石会围绕着星球不停地旋转,而且配合黑色的背景后带有很强烈的3D视觉效果。

html5-canvas-3d-planet

在线演示源码下载

HTML5 Canvas 房间3D模型动画 可读取麦克风和摄像头

这是一款基于HTML5 Canvas的3D房间模拟动画,房间里有电视机、沙发、书柜、灯具以及一个人物模型,这些模型都是在Canvas上绘制而成。更重要的是,这款3D动画可以利用HTML5特性读取本地麦克风和摄像头,这样就可以通过摄像头将你自己投影到电视机上,看上去挺神奇的。

html5-canvas-3d-model-camera

在线演示源码下载

HTML5/CSS3 3D图片播放器 可360度旋转图片

记得之前给大家分享过一些超炫酷基于jQuery和HTML5 的3D焦点图图片播放器,很多还是不错的,比如jQuery 3D 垂直螺旋切换焦点图动画超赞实用的jQuery立体3D焦点图插件。今天要分享的是另外一款基于HTML5和CSS3 3D图片播放器,它的特点是图片呈3D样式,而且可以通过滑杆360旋转图片,效果非常炫酷。

html5-css3-3d-rotate-image

在线演示源码下载

HTML5 Canvas 3D立方体波浪动画

之前我们分享过很多基于CSS3和HTML5 Cavans的3D立方体动画,有几款还是比较炫酷的,比如这款HTML5/CSS3 3D立方体拼图和这款CSS3 3D立方体图片墙 可拖拽360度旋转。这次我们要介绍的是一款基于HTML5 Canvas的3D立方体波浪动画,一个个小立方体组成一个立体面,立方体按一定数学规则上下浮动,形成了炫酷的波浪动画效果。

html5-canvas-3d-cube-wave

在线演示源码下载

HTML5 Canvas 2D文字与3D图像粒子转换动画

今天我们要给大家分享一款基于HTML5的3D粒子动画,该动画主要在Canvas画布上绘制粒子形的文字和3D模型,并且实现2D粒子文字与3D粒子模型之间的转换动画。在转换过程中,粒子从被打散到重新组合,动画效果非常炫酷,并且我们可以通过鼠标滚轮来缩放3D模型。

html5-canvas-2d-to-3d

在线演示源码下载

超炫酷HTML5 Canvas 3D旋转地球动画

这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画,记得在很早以前我们也分享过一款基于HTML5 Canvas的地球动画,请看这里

html5-canvas-3d-earth-rotate

在线演示源码下载