标签归档:HTML5 3D

HTML5 3D点阵列波浪翻滚动画

还记得之前分享过的两款HTML5 3D波浪动画特效么?它们是纯CSS3/HTML5实现3D波浪形动画HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙,其中一款利用WebGL让3D效果渲染得淋漓尽致,不过也消耗CPU。今天我们要再分享一款基于HTML5 3D的点阵列波浪翻滚动画特效,同样是非常的壮观。

html5-dots-wave-animation

在线演示源码下载

HTML5小球弹跳动画 很不错的3D小球

今天我要向大家分享一款很逼真的HTML5动画特效,它是3个色彩各异的弹跳小球,每一个小球在弹跳的时候都会有变化的小球投影,让整个动画更加逼真,而且具有3D的视觉效果。之前分享过小球跳动的Loading动画,效果也非常不错。

html5-3d-bouncing-ball

在线演示源码下载

HTML5 3D幻灯片播放特效 可自定义图片参数

今天我们要来分享一款功能非常强大的HTML5幻灯片播放特效,图片是响应式布局,可以根据窗口大小自动展示成一列或者两列。点击图片即可展示图片的详细信息,包括图片的文字描述。图片在展开的时候有非常酷的3D特效,相当不错的HTML5幻灯片插件。

html5-3d-lightbox

在线演示源码下载

HTML5/CSS3 3D纸片折叠动画

今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效,尽管它目前很少能在项目中应用,但从源码中我们可以学到很多HTML5 3D动画的制作知识。这是一款纸片折叠动画特效,利用HTML5和CSS3的相关特性,我们可以将一张张纸片折叠起来,形成很酷的3D动画效果。

html5-css3-3d-paper-animation

在线演示源码下载

HTML5 webkit 3D立方体图片旋转滑块应用

今天再来分享一款HTML5 3D立方体动画,这个只是一个3D效果模型,你可以用图片替换演示中的立方体4个面,这样就可以将这款HTML5立方体旋转动画改造成HTML5 3D焦点图了,由于是基于webkit的,所以有浏览器限制,Google Chrome最佳。

html5-webkit-3d-cube-slider

在线演示源码下载

HTML5颜色渐变3D文字特效

之前我们已经分享过不少HTML5文字特效,效果都还不错,尤其是这款HTML5摆动的文字特效 类似柳枝摆动,更是有非常酷的文字动画效果。今天我们要分享一款HTML5 3D文字特效,文字的颜色是渐变的,同时有文字阴影,更加凸显了3D立体的效果。

html5-gradient-3d-text

在线演示源码下载

HTML5/CSS3 3D图片 边框阴影和图片投影

还记得之前分享过的一款HTML5 3D图片翻转特效吗?在这里HTML5 3D骨牌图片特效 带文字描述。今天我继续要为大家带来一款很不错的HTML5/CSS3 3D图片特效,图片的边框有阴影,在图片翻转的时候还有很不错的投影效果。

html5-css3-3d-image-transform

在线演示源码下载

HTML5 3D手掌动画 看起来很抽象

今天我们要来分享另外一款很酷的HTML5 3D动画,它是用一个个像素点构造的3D立体手掌动画,你可以拖动鼠标从不同的侧面观看这只非常抽象的手掌。另外,我再推荐一款HTML5 3D动画:HTML5 SVG 3D蝴蝶飞舞动画

html5-3d-hand

在线演示源码下载

HTML5/CSS3 3D三角锥动画 可选择多种背景

这是一款看起来很普通的HTML5 3D特效,是一个3D立体的三角锥,并且三角锥可以任意角度旋转以显示其3D的效果。但是这款HTML5 3D三角锥动画的特点是可以选择多种方式的背景画面,可以是文字,也可以是图片背景,是一款还不错的HTML5 3D动画演示。

html5-css3-3d-tetra

在线演示源码下载

HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷

这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的。另外,动画使用了一张立体感很强的天空背景图,让蝴蝶飞舞时更加显得立体逼真。

html5-3d-butterflies

在线演示源码下载