标签归档:HTML5 3D

HTML5 3D波浪起伏动画特效

今天我们要来分享一款很不错的HTML5 3D动画特效,它是一个波浪起伏的动画效果,跟之前分享的那款HTML5 3D 粒子波浪动画特效不同的是,这款HTML5动画可以拖拽鼠标查看不同角度的波浪效果,同时也可以利用鼠标滚轮来实现视窗的缩放。

html5-3d-wave-animation

在线演示源码下载

HTML5 3D 粒子波浪动画特效

之前我们分享过一个HTML5 3D点阵列波浪翻滚动画,效果非常震撼。今天我们要在来分享一款升级版HTML5 3D粒子波浪动画特效,我们可以旋转不同的视角来欣赏粒子波浪的滚动特效。HTML5在动画制作方面的确让人眼前一亮。

html5-3d-wave

在线演示源码下载

HTML5/CSS3可折叠的3D立方体动画

最近我们已经为大家分享过很多基于HTML5和CSS3的立方体动画,比如HTML5多立方体3D翻转动画HTML5 3D立方体图片切换动画,效果都非常惊人。今天要给大家带来另外一款CSS3 3D立方体动画,尤其在DEMO2中可以看到,鼠标滑过立方体后,它将会被打开,从里面弹出另外一个小立方体,动画效果非常酷,非常逼真。

html5-css3-unfold-3d-cube

在线演示源码下载

HTML5多立方体3D翻转动画

很久没有分享关于HTML5 3D动画的应用了,大家可以移步至HTML5 3D目录下欣赏所有的HTML5 3D动画特效。今天小编要给大家带来另外一款HTML5 3D立方体翻转动画,这款动画能实现多个立方体按一定顺序翻转,给人墙体翻转的3D视觉效果。

html5-rect-wave

在线演示源码下载

HTML5/CSS3实现图片倒影3D效果

这是一款基于HTML5的图片倒影特效,同时它主要利用了CSS3的倾斜属性,通过这样的渲染,让图片整体看上去很富有立体感,图片的倒影看上去也非常逼真,是一款比较实用的HTML5图片应用。

html5-css3-image-shadow

在线演示源码下载

HTML5 3D立方体图片切换动画

今天我们要来分享一款HTML5图片切换动画,该HTML5动画主要是将图片分成几个块,切换时每一个块都会以3D立方体的形式过度下一张图片,立方体的打散和聚合动画都非常酷,你可以在JS文件中配置图片的路径和切换的数量,相当灵活。

html5-3d-cube-image-slider

在线演示源码下载

3D版HTML5模拟衣服撕扯动画

还记得很早以前向大家分享的这款HTML5 Canvas模拟衣服撕扯动画吗?这绝对是一款非常具有创意而且很好玩的HTML5动画。今天我们来分享一下它的3D版本,在原来的基础上,衣服布料呈3D环形显示,你同样可以用鼠标拖拽衣服,不过和之前不同的是,鼠标左键用来拖拽衣服,鼠标右键用来切割衣服,失去了之前鼠标用力程度和衣服破碎程度的关系,似乎功能上有所缺失,但是HTML5 3D功能还是不错的。

3d-html5-cloth-tear

在线演示源码下载

下面我们来简单分享一下实现的源码,代码主要由HTML和JavaScript组成,主要还是JavaScript。

HTML代码:

<canvas width="800" height="800" id="c"></canvas>

只是定义了一个canvas标签,非常简单。

JavaScript代码:

canvas = document.getElementById('c');
ctx    = canvas.getContext('2d');

//settings
var physics_acc   = 5,
    tear_d[......]

阅读全文>>

HTML5 3D爱心动画 晚来的七夕礼物

七夕情人节刚过,今天小编却在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画,莫非老外也过七夕?当然小编还是将这款HTML5 3D爱心动画收藏了起来,虽是晚来的七夕礼物,但还是可以讲这款爱心动画留到明年七夕再用嘛。大家可以点解DEMO来看看。

html5-3d-heart-animation

在线演示源码下载

这么好看的HTML5爱心动画,我们当然要把源代码分享给大家,下面是小编整理的源代码,主要是HTML代码和CSS代码。

HTML代码:

<div class=’heart3d’>
<div class=’rib1′></div>
<div class=’rib2′></div>
<div class=’rib3′></div>
<div class=’rib4′></div>
<div class=’rib5′></div>
<div class=’rib6′></div>
<div class=’rib7′><[......]

阅读全文>>

HTML5 SVG 3D空间模型 可拖拽缩放

这是一个基于HTML5和SVG的3D空间模型,这个3D模型提供了x、y、z三个坐标轴以及一个平面网格。我们可以对这个HTML5 3D模型进行缩放、拖拽、翻转等操作,这些操作可以通过鼠标,也可以通过快捷键,非常方便。

html5-svg-3d-model

在线演示源码下载

HTML5 Canvas 地球旋转3D动画

很久没有分享HTML5动画特效了,尤其是HTML5 3D动画,每一个都非常酷。今天我们要分享的是一个基于Canvas的HTML5 3D地球旋转动画,地球外观非常逼真,海面、陆地、白云都像是真的一样,另外地球还可以自己缓慢的旋转和移动,呈现出3D立体的视觉效果。

html5-canvas-3d-earth

在线演示源码下载