标签归档:HTML5 3D

HTML5 3D阴影文字特效

今天我们要来分享一款非常简单大气的HTML5 3D文字特效,这个3D文字特效是通过文字加粗以及文字阴影来实现的,效果非常不错。同时我们在html5tricks网站上也分享过很多炫酷的文字特效,比如CSS3文字阴影效果 阴影角度可随鼠标变化动感的CSS3 Loading文字特效

html5-3d-text-shadow

在线演示源码下载

HTML5 3D图片阴影翻转动画 效果很酷

今天我们要分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和之前分享的HTML5 3D动画HTML5 3D正方体旋转动画有着类似的效果,大家也可以看看。

html5-3d-shading-effect-box

在线演示源码下载

HTML5 3D正方体特效 可任意面旋转定位

之前对于HTML5立方体动画我们已经有过不少分享了,像这款HTML5/CSS3 3D立方体扭曲动画HTML5 3D立方体旋转动画都非常不错。今天我们要介绍的这款HTML5 3D立方体动画的特点是可以定位立方体的任意面,同时也可以在不同的方向上旋转。

html5-cube-any-face

在线演示源码下载

HTML5/CSS3 3D文字特效 文字立体可旋转

今天我们要分享一款效果挺不错的HTML5 3D文字特效,首先文字本身具有投影的立体效果,再加上文字的旋转摆动动画,就更显文字3D动感了。之前我们也分享过几款挺不错的HTML5文字特效,像HTML5/CSS3 3D文字特效 文字外翻效果,也具有3D的效果。

html5-css3-3d-text

在线演示源码下载

HTML5 3D图片切片滑块旋转动画 超酷的HTML5 3D特效

先来说说怎么玩这款HTML5 3D图片动画特效,我们只需要在图片上面拖动鼠标,图片即会在垂直方向分裂出数块小长方体,然后每一个小长方体沿着鼠标拖动的方向旋转。这款HTML5 3D动画非常酷,它的实现离不开js动画框架TweenMax。

html5-3d-image-block

在线演示源码下载

HTML5 TweenMax.js和jQuery实现的3D图片动画 可多角度旋转

TweenMax是一个很常用的动画制作框架,TweenMax.js是TweenMax的JS版本,今天我们就结合TweenMax.js和HTML5来实现一款超炫的3D图片墙动画,几张图片围成一个围墙,然后图片墙可以随着鼠标的移动而旋转,旋转速度可以根据鼠标来变化,非常酷的HTML5 3D动画应用。

html5-3d-carousel

在线演示源码下载

HTML5/CSS3 3D立方体扭曲动画

之前我们有分享过很多3D的旋转立方体动画,像HTML5 3D立方体旋转动画HTML5 3D正方体旋转动画 很酷的3D特效等等。今天要分享的这款HTML5动画也是和立方体有关,立方体会在不同的角度进行扭曲、放大和缩小,效果非常不错。

html5-animated-cube

在线演示源码下载

HTML5 3D球体斑点运动动画

这是一个很酷的HTML5 3D动画效果,是一个小球,小球表面出现跳动的斑点,斑点跳动时形成各种各样的形状,其实这款动画并不是正宗的HTML5 3D动画,而是利用这些小斑点组合的各种形状造成的3D视觉效果。

html5-psychospher-ball

在线演示源码下载

纯CSS3/HTML5实现3D波浪形动画

今天我们又要来分享一款实现简单的纯CSS3 3D动画效果,这款HTML5/CSS3动画是一个3D波浪形动画特效。利用一堆div加上CSS3对每个div的控制,实现波浪起伏的动画效果。这和之前分享的HTML5/CSS3 3D木块旋转动画的实现方式类似,大家可以参考一下css源代码。

html5-css3-wavy-3d-effect

在线演示源码下载

HTML5 3D立方体旋转动画

之前我们已经分享一款HTML5 3D正方体旋转动画,可以切换至正方体的任意一面。今天我们再来分享一款绚丽的HTML5 3D立方体旋转动画,这款立方体的色彩看上去非常艳丽,旋转起来的动画效果也十分流畅。是一款很不错的HTML5 3D动画效果。

html5-3d-cube

在线演示源码下载