自由手記

经过几天的收集，在html5tricks网站上又增加了不少HTML5的教程和应用，今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下，一共9款HTML5特效，分享给大家。

1、HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙

在HTML5特效中，和水波相关的我们已经分享过两款：HTML5 WebGL水面水波荡漾特效、HTML5水波荡漾动画特效。这又是一款HTML5 Canvas实验项目，也是波浪特效，只是这不是真正的水波，而是利用柱体高度的变化实现的波浪墙效果。

在线演示    /    源码下载

2、HTML5重力感应动画特效 冲撞小球演示

前面我已经向大家分享过一款非常绚的HTML5重力感应游戏特效，我们只需要用鼠标甩动页面上的元素就可以实现模拟重力感应的效果。今天这款HML5重力感应动画特效功能更强，页面上会掉落大小不等的小球，我们可以拖动小球，也可以点击页面空白来生产更多的小球，如果你的电脑配置高，可以试试产生更多的小球来玩，非常有趣。

在线演示    /    源码下载

3、HTML5 Canvas图表应用RGraph 图表功能非常强大

前几天我向大家分享过一款HTML5实时数据图表，可以选择数据展示的时间段。今天再分享一款功能强大的HTML5 Canvas图表应用，这款HTML5图表有多种类型，直线图，柱状图，饼状图，甚至还有混合图，图表配置也十分简单，功能却非常强大。

在线演示    /    源码下载

4、新款CSS3按钮组合 5组可爱CSS3按钮

之前我分享过一些时尚的CSS3动画按钮，比如CSS3渲染Checkbox实现3D开关切换按钮、纯CSS3 3D按钮 按钮酷似牛奶般剔透等等。今天就再来分享一款可爱的CSS3按钮组合，该CSS3按钮一共有5种不同的风格，有几款还有3D立体的效果。一起来欣赏这些可爱的CSS3按钮吧。

在线演示    /    源码下载

5、CSS3图片层叠展开特效 可展开扇形效果

今天要分享的这款CSS3图片特效没有那么绚丽，它的功能非常简单，当你把鼠标移到图片上时，多张图片便会由原先的叠在一起变成展开状态，展开过程中伴随CSS3动画，展开的形状是扇形。这款简单的CSS3图片层叠展开动画可以应用在图片展示和图片分享上。

在线演示    /    源码下载

6、HTML5 Canvas饼状图表 HTML5&jQuery图表应用

以前我们利用jQuery制作过一些图表应用，使用起来都非常方便。今天再来看一款基于HTML5 Canvas的饼状图图表应用，鼠标点击饼状图的某块区域时，即可高亮突出显示该区域。由于该饼状图是基于HTML5开发的，所以需要支持HTML5的浏览器才能够使用。

在线演示    /    源码下载

7、CSS3 Loading进度条加载动画特效 3款绚丽风格

前面我向大家分享了几款非常漂亮的CSS3进度条插件，CSS3 SVG 进度条 Loading 动画、纯CSS3进度条 华丽5色进度条示例。今天我要分享一款更加炫酷的CSS3进度条加载动画特效，该动画特效有3个不同的风格，注意，IE6，7，8是不支持该进度条动画的。

在线演示    /    源码下载

8、纯CSS3进度条 华丽5色进度条示例

这是一款利用纯CSS3实现的进度条，它的实现非常简单，没有复杂的动画，该CSS3进度条最大的特点是拥有非常漂亮的5种颜色，整个进度条看上去非常专业。这款CSS3进度条和之前的CSS3 3D进度条相比显得更简单易用。

在线演示    /    源码下载

9、CSS3联系表单 清新外观带美化Select表单

之前我向大家分享过一款非常绚丽的CSS3发光表单，的确是很酷，大家可以先看看。今天要分享的这款CSS3表单就比较清新简单了。表单整体看上去很干净，特别的是，该CSS3联系表单有一个自定义的美化select表单，表单项在被激活的时候边框颜色会改变。

在线演示    /    源码下载

以上就是9款赏心悦目的HTML5/CSS3应用特效，欢迎收藏和分享。