TML5技术已经越来越被我们所接受，特别是一些3D的动画特效。本文介绍的8个HTML5 3D动画并没有特别华丽的界面，但是比较实用，涉及到3D图片、3D图表、3D按钮等方面，一起来看看。

1、HTML5 3D动画柱形图表

这次我们要来分享一款效果非常酷的HTML5 3D柱形图表，这款HTML5图表和之前分享的都不一样，主要是外观上比较吸引人，首先图表是3D立体的，有一种非常棒的视觉效果；其次，当鼠标划过柱形图表时，会有很不错的HTML5动画效果。

2、HTML5 3D 粒子波浪动画特效

今天我们分享一款升级版HTML5 3D粒子波浪动画特效，我们可以旋转不同的视角来欣赏粒子波浪的滚动特效。HTML5在动画制作方面的确让人眼前一亮。

3、HTML5自定义文字背景生成QQ签名档

这是一款利用HTML5实现的自定义文字背景应用，首先我们可以输入需要显示的文字，并且为该文字选择一张背景图片，背景图片就像蒙版一样覆盖在文字上。点击生成QQ签名档即可将文字背景融为一体生成另外一张图片，你也可以下载这张拥有你QQ签名档的图片。

4、HTML5坦克大战游戏简化版

今天分享的是一款简化版的HTML5坦克大战游戏，方向键控制坦克的行进方向，空格键发射子弹，命中敌方坦克后也会发出声音，效果还算可以。

5、HTML5 3D阴影文字特效

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

6、HTML5 3D衣服摆动特效 超酷HTML5 3D动画

今天向大家分享一款HTML5 3D衣服摆动动画特效，动画也是在HTML5 Canvas上完成，它模拟衣服晾在绳子上，点击鼠标可以让衣服摆动起来，就行风吹动它一样，非常逼真炫酷。

7、HTML5/CSS3一组可爱的3D按钮

这是一款利用HTML5和CSS3制作而成的按钮组合，这款CSS按钮非常具有个性化。该CSS3按钮不仅具有3D的外观，点击按钮也具有非常立体的效果，更具有特点的是这款CSS3按钮的形状是不规则的，而且按钮中都有一个可爱的小图标。

8、HTML5 Canvas 3D折线图表应用

今天我们再来讨论一下关于HTML5图表应用的问题，这款HTML5图表是基于canvas的3D折线图表，图表在初始化的时候会根据数据点把折线分割成多条线段，然后线段将逐渐悬浮到数据点对应数值的位置。由于是3D的效果，所以图表的折线也和其他折线图表的不同。

以上就是8个经典的HTML5 3D动画赏析，希望大家喜欢。

hart.js是一个开源、简单而灵活、使用HTML5的canvas元素的JavaScript图表，支持柱型和线型混合显示提供清晰的视觉区别，在所有现代浏览器（IE9+）提供强大的渲染性能，有8种不同的图表类型，每一种都是可定制的；当浏览器大小发生改变时他会重新绘制图表。

1、下载及初始化

https://github.com/chartjs/Chart.js

在github下载后，你必须构建Chart.js生成dist文件。然后在页面中引入生成的dist/Chart.js文件；或者直接引入托管平台上的Chart.js文件。

然后在页面body中创建一个<canvas>元素。

最后，以上准备好了就能创建一个图表了，在页面中添加一个脚本。

npm安装命令：npm install chart.js --save

bower安装命令：bower install chart.js --save

2、基本演示

①柱形图表

②线形图表

③面积图表

④饼形图表

⑤柱、线混合

⑥散点图

⑦网格线图表

官方网站：

http://www.chartjs.org/

Chart.js只有一些基础的图表，简单的可视化数据展示，同时能够动态改变数据、更新颜色、添加数据等，能够重绘图表调整到完美规模的粒度。内含多种鼠标事件，提供许多选项来配置动画的样子。Chart.js适合只需要简单图表的项目，如果需要更复杂的显示，可以选择echarts或Highcharts图表库。

有哪里写得不好的地方请大家提出来，请轻喷，谢谢。 同时有什么与编程相关的好东西可以推举给我，再次感谢！

.超简易的SVG/CSS3 Loading加载动画图标

今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标，和之前分享的SVG实现的一组超华丽Loading加载动画相比，这组Loading动画更见简单，它主要由圆环形和柱形两种样式组成，可以将这些Loading图标应用在很多种类型的页面中，非常实用。

2.jQuery左右切换焦点图插件 3D阴影相框

这是一款相对比较简单而实用的jQuery焦点图应用，它的特点是左右切换按钮悬浮在图片右下角，点击切换按钮即可让图片进行左右平移地切换，效果着实是简单，但是个人觉得很实用。另外还有一个特点是，这款jQuery焦点图插件带有3D阴影的相框，从而简单中稍带一点点华丽。

3.jQuery层叠图片细节对比插件

之前我们分享过几款比较实用的图片对比插件，比如这款JavaScript图片拖动对比 实现图片差异定位就非常强大，可以左右滑动。今天我们要介绍的这款jQuery层叠图片细节对比插件功能也比较实用，可以通过鼠标滑动图片上方的滑杆来对比两张图片的细节。

4.jQuery自定义美化Select下拉框插件

之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件，比如jQuery Select下拉框美化插件 菜单淡如淡出动画和漂亮实用的Select下拉框美化插件Tether都非常不错。今天我们要给大家介绍另一款基于jQuery的自定义美化Select下拉框插件，它的配置十分简单，引用插件库后用几行jQuery代码初始化即可。

5.纯CSS3实现的蒙娜丽莎画像

蒙娜丽莎画像非常著名，如果告诉你这幅画像我们可以使用纯CSS3绘制而成，你是否会觉得非常惊讶。没错，今天我们要分享的就是这个使用纯CSS3，没有使用任何图片的蒙娜丽莎画像，实现原理是利用CSS3的阴影特性，逐层用不同的颜色渲染，从而形成这幅蒙娜丽莎巨作，当然有点模糊是肯定的，毕竟是通过投影渲染的，是不是觉得非常神奇。

6.CSS3社交关系网模拟动画

这次我们要给大家分享一款CSS3模拟社交关系网的动画特效，社交网的中心是用户的头像图片，由中心连线展开到各个社交网络的Logo图片，同时每一条连接线上面都会有一个圆点由中心向各个节点移动，形成关系网的模拟动画，利用CSS3，我们可以让点运动，也可以让图片变成圆形，还是比较有趣的。

7.CSS3自定义菜单内容的二级下拉菜单

之前我们分享过很多基于jQuery和CSS3的二级下拉菜单，大部分都非常实用，当然也不乏炫酷的动画，比如这款HTML5/CSS3水平二级下拉菜单就比较朴实，这款jQuery/CSS3波浪形弹性下拉菜单就比较富有个性。今天我们要分享的这款CSS3下拉菜单特点在于二级下拉菜单内容可以自定义，可以是简单的多列，也可以是复杂的图文排版。

8.HTML5 多维度3D图片切换动画

今天我们要给大家分享一款非常特别的HTML5/CSS3焦点图插件，这款焦点图插件可以实现XY两个维度的图片切换动画，并且图片在排列时有一种3D立体的视觉效果，这样的效果正是使用了CSS3特殊属性改变了图片4条边的倾斜角度。

9.纯CSS3乒乓球动画

这是一个比较有意思的纯CSS3乒乓球动画特效，主要是模拟了乒乓球运动动画，画面上用CSS3绘制了一张乒乓球桌，一个乒乓球在球桌上来回运动，就好象两个运动员在打乒乓球一样。当然如果你可以在球桌两端绘制两个运动员那就更加逼真的，有兴趣的同学可以自己研究一下。

10.移动端可拖拽jQuery图片切换插件 带Tooltip缩略图

这是一款很特别的jQuery焦点图插件，它和其他的图片切换插件不同，它主要在移动设备上使用，因此我们并不能像其他焦点图插件那样点击切换按钮来切换图片，而是通过滑动带Tooltip外观的缩略图来切换图片，并且图片显示时采用中心放大扩散的动画特效，效果还是不错。

11.CSS3带数字时钟的创意圆盘时钟动画

前几天我们刚刚为大家分享过一款基于SVG和CSS3的复古圆盘时钟，大家可以在这里查看演示和这里下载源码。今天又要给大家带来另外一款CSS3圆盘时钟，它的特点是圆盘对半分，一半显示数字时钟信息，另一半是半个圆盘时钟，样式设计上非常富有创意。

12.精美的jQuery视差效果图片轮播插件

今天让我们给大家分享一款基于jQuery的视差效果的图片轮播插件，它与一般的jQuery焦点图插件相比，并不是图片之间的切换，而是各种网页元素悬浮在一张大背景图上，切换时背景逐渐移动，另外背景上的元素也会跟着切换，与之类似的还有一款jQuery视差效果的焦点图插件。

13.CSS3鼠标滑过图片覆盖渐变颜色蒙版

今天我们要介绍一款比较实用的CSS3图片特效，它并没有非常华丽的动画效果，但是很多场合都可以用到。当我们将鼠标滑过图片时，图片上方会覆盖一层渐变颜色的蒙版，移开图片蒙版又会以渐变的方式消失，同时这层蒙版由于颜色动态渐变，因此给人一种发光的视觉效果。

14.纯CSS3可爱笑脸开关切换按钮

近期我们集中为大家分享过很多基于HTML5和CSS3的开关切换按钮，像这款多组超具创意的CSS3开关切换按钮拥有多套风格的外观，还有这款漂亮的CSS3/SVG个性化开关按钮又非常具有创意。今天要分享的这款同样也富有创意，整个开关按钮由笑脸和哭脸组成，点击按钮后可以在笑脸哭脸之间切换，另外按钮带有阴影，看起来有3D立体的视觉效果。

15.纯CSS3/SVG实现的带秒针表盘圆盘复古时钟

现在的网页上圆盘时钟越来越少见了，更多的是数字时钟和数字日历。之前我们分享过一些基于jQuery和CSS3的圆盘时钟动画，比如纯CSS3 3D立体圆盘时钟动画和jQuery实现一个挂在墙上的圆盘时钟动画都非常不错。这次要给大家带来一款比较复古的圆盘时钟，基于纯CSS3，盘面是SVG绘制而成，并没有使用任何图片。时钟整体外观比较怀旧，给人不一样的视觉感受。