标签归档:HTML5 3D

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

在线演示源码下载

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

在线演示源码下载