标签归档：HTML5 3D

HTML5 3D 神秘游戏场景动画

今天分享的是一个基于Three.js的HTML5 3D动画，这个动画模拟了游戏中的一个炫酷的3D场景，支持360度视角查看，也支持鼠标滚轮进行缩放。画面中主要展现了一个游戏中传送门的效果，同时还有路两边的围栏、灯笼、石头，以及星光闪闪的萤火虫，整个画面显得十分神秘。不得不说，threejs作为webgl的上层库，基本可以满足我们动画制作的大部分需求。

在线演示源码下载

HTML5 3D无限循环图片流

这是一款基于HTML5的3D无限循环图片流，它模拟了以前Mac Dock菜单栏的设计方式，每一张图片都有倒影，因此给人一种3D立体的视觉效果。另外，我们不仅可以通过鼠标拖拽来滚动切换图片，而且可以通过鼠标滚轮来切换。拖拽可以控制滚动的速度，而且这个图片流是可以无限循环的，不管有多少图片，都可以加入到这个图片流中进行展示。

在线演示源码下载

HTML5 3D 视差相册画廊

这是一个基于HTML5和CSS3的3D视差相册画廊，画廊中的图片围成一个圆环，拖拽鼠标可以让图片在环形画廊中滚动切换，并且将鼠标滑过图片时，图片也会产生高亮效果，形成一种3D的视差效果。另外，我们可以在次基础上稍微扩展一下，有兴趣的同学可以自己改造一下，就是鼠标点击图片时，可以展开原图，这样我们就可以浏览图片的具体细节了。

在线演示源码下载

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

3,699 人浏览

发表回复

2019-09-21 11:18:42

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

在线演示源码下载

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

4,893 人浏览

发表回复

2019-07-16 22:13:35

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

在线演示源码下载

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

5,952 人浏览

发表回复

2019-04-14 11:14:09

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

在线演示源码下载

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

5,304 人浏览

发表回复

2019-01-21 10:21:17

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

在线演示源码下载

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

6,410 人浏览

发表回复

2018-06-22 17:22:26

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