标签归档：HTML5 Canvas

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

78 人浏览

2019-07-16 22:13:35

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

在线演示源码下载

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

921 人浏览

发表回复

2019-04-14 11:14:09

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

在线演示源码下载

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

1,620 人浏览

发表回复

2019-01-21 15:09:19

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

在线演示源码下载

HTML5 Canvas火焰跟随鼠标动画

1,025 人浏览

发表回复

2019-01-08 21:28:17

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

在线演示源码下载

WebGL和Canvas可视化3D飞机模型结构可360度预览

1,863 人浏览

发表回复

2018-12-30 13:52:19

今天给大家分享一个基于HTML5 Canavs和WebGL的3D模型结构，它是一个可360度预览的可视化3D飞机模型结构。我们可以通过鼠标拖拽自定义不同的角度对飞机模型进行观察，也可以点击按钮对飞机的具体部位进行详细观察。同时，我们也可以通过鼠标滚轮来缩放飞机的大小。

在线演示源码下载

HTML5 Canvas 鼠标滑过3D动画背景

1,004 人浏览

发表回复

2018-12-25 13:22:28

在网页中我们经常会设置元素的背景，简单点的设置背景颜色，复杂的就设置背景图片。今天给大家分享一个将HTML5 canvas动画作为网页背景的例子，将canvas置于文本底部，canvas上绘制很多3D图形，当我们将鼠标滑过背景时，canvas上的这些3D图形将会翻转，效果很酷。

在线演示源码下载

HTML5 Canvas奇幻色彩Loading加载动画

1,006 人浏览

发表回复

2018-12-22 15:17:11

之前我们分享过很多基于CSS3的Loading加载动画，通过CSS3的高级特性，可以制作出形态各异的Loading加载动画组件。今天给大家带来的这款Loading加载动画是基于HTML5 Canvas的，在canvas画布上，我们动态绘制许多多边形，这些多边形伴随着颜色的随机变化和旋转，形成了奇幻色彩的视觉效果，是一款非常炫酷的HTML5 Loading动画特效。