标签归档:HTML5 3D

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

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

html5-canvas-3d-earth-rotate

在线演示源码下载

HTML5 Canvas 3D文字动画 支持鼠标滚轮缩放

之前我们已经为大家分享过很多款炫酷和实用的HTML5文字动画特效,最经典的就是这款HTML5 Canvas幻彩火焰文字特效。这次给大家带来的是另外一款基于HTML5 Canvas 3D文字动画,它的特点是按住鼠标左键拖动文字可以旋转文字,从不同角度观察文字;按住鼠标左键可以移动文字;另外滑动鼠标滚轮可以缩放文字大小。

html5-canvas-3d-text-scale

在线演示源码下载

HTML5/CSS3 3D立方体拼图 支持方向键旋转

之前我们分享过不少基于HTML5/CSS3和Canvas的3D立方体旋转动画,比如这款超绚丽CSS3多色彩发光立方体旋转动画,也有基于立方体做的菜单应用,比如超实用CSS3 3D菜单 菜单项悬浮凸出立体效果。今天我们要分享的是一款基于HTML5和CSS3的3D立方体拼图应用,一共有8个小立方体组成的3D拼图,我们可以点击立方体或者方向键完成拼图,同时我们也可以让立方体保持旋转。

html5-css3-3d-cube-puzzle

在线演示源码下载

基于HTML5 WebGL的3D星云动画特效

今天我们给大家分享一个基于HTML5 Canvas的星云动画特效,整个画面模拟了一个星系的外观,比如模拟了太阳系,有很多小行星围绕着星系中心旋转,星系中心也显得格外亮丽。这些小星点都是在Canvas上绘制而成,同时我们还可以拖拽鼠标从不同视角观看星云,非常大气。

html5-webgl-galaxy

在线演示源码下载

HTML5 Canvas 多种炫酷3D粒子图形动画

在不久之前,我们分享过好几款基于HTML5 Canvas的粒子动画特效,都比较炫酷,比如这款HTML5 WebGL绚丽五彩流体模拟动画HTML5 WebGL粒子爆炸动画。这次我们同样要分享另外一款HTML5 Canvas 多种炫酷3D粒子图形动画,与前面的类似,它也是利用HTML5的粒子特性绘制出各种3D外观的图形,有3d球形、3d圆环、3d沙漏形等,视觉效果都非常不错。

html5-canvas-3d-pixel-graph

在线演示源码下载

HTML5 Canvas 3D波浪翻滚动画

之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5 3D波浪起伏动画特效和这款超酷无比的HTML5 WebGL水面水波荡漾特效。今天我们要介绍一款也是基于HTML5 Canvas的波浪翻滚动画,它同样有着3D立体的视觉效果,同时波浪在起伏时也伴随的浪花汹涌的动画特效,看上去非常炫酷。

html5-canvas-3d-wave

在线演示源码下载

HTML5 Canvas 3D线条凹凸人物头像

美术是一项神奇的技术,就像这款HTML5 Canvas头像一样,仅仅用线条的凹凸走向,就可以绘制出一个3D样式的人物头像。这款人物头像是在HTML5 Canvas画布上绘制而成,并且可以随着鼠标移动而呈现不同角度的观察效果。

html5-canvas-3d-line-avatar

在线演示源码下载

HTML5/CSS3 3D木头人行走动画

今天我们要为大家分享一款基于纯CSS3的3D木头人行走动画,关于人物行走动画,我们在以前也介绍过一些,最为经典的要算这款纯CSS3人物行走动画。今天的这款人物行走动画也是基于CSS3和HTML5实现,不同的是,这款是一个3D的木头人,我们可以通过拖拽鼠标来从不同的角度观察这个人物行走情况,是不是觉得CSS3很酷?

css3-3d-walking-men

在线演示源码下载

HTML5/CSS3 全屏3D焦点图切换插件

今天我们要给大家分享一款基于HTML5和CSS3的3D焦点图插件,类似的3D焦点图插件之前也有分享过,比如这款jQuery 3D 垂直螺旋切换焦点图动画和这款jQuery/CSS3 3D旋转图片切换焦点图插件都非常不错。这次的3D焦点图动画插件是全屏的,效果非常绚丽,整张图片就像悬浮在夜空中一样,切换时还带有丰富的过渡动画效果。

html5-css3-3d-full-slider

在线演示源码下载

HTML5 Canvas五彩缤纷的3D发光水晶球动画

这是一款基于HTML5 Canvas的超绚丽发光水晶球动画,就像是酒吧里的那种水晶球射灯一样,不停地随机变换射出光线的颜色,给人一种非常动感的视觉效果。整个水晶球是在Canvas画布上绘制而成,利用CSS3的相关特性使其能够出现五彩缤纷的发光动画,而且可以通过鼠标滚轮来放大缩小这个水晶球,不得不说HTML5真的是非常强大。

html5-canvas-crystal-ball

在线演示源码下载