【转】15个无比华丽的HTML5/CSS3动画应用

原文转自：http://www.html5cn.org/article-7089-1.html

前几天，HTML5标准已经尘埃落定，未来的Web将会是由HTML5主导，当然作为开发者对这一喜讯更为动心。本文主要分享了15个无比华丽的HTML5/CSS3动画应用，供大家参考学习。

1、HTML5/CSS3图片选择动画 可选择多张图片

今天我们来分享一款既炫酷又实用的HTML5图片选择特效，当图片被选中时，图片上就会覆盖一个半透明的层，上面有一个勾，并且在选中的时候图片出现弹跳的动画效果。

在线演示        源码下载

2、纯CSS3实现图片复古效果 鼠标滑过切换

今天我们要分享一款非常酷的图片效果，这个效果在很多P图软件中经常可以看到，就是对一张图片进行复古效果的渲染。这款CSS3图片效果就实现了这个复古的特效，我们只要将鼠标滑过图片，就可以实现这一图片复古效果了。

在线演示       源码下载

3、CSS3华丽的Tab菜单 带小图标动画

之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单，结合SVG，Tab菜单实现非常灵活。今天我们要再来分享一款基于CSS3的华丽Tab菜单，这款Tab菜单的菜单项是一个个小图标，鼠标滑过时，菜单项展示对应文字，并出现展开的动画。

在线演示        源码下载


4、HTML5/CSS3书本翻页3D动画

前段时间我们分享过很多牛叉的HTML5动画，如果你对HTML5感兴趣，可以移步至HTML5动画欣赏学习。今天我们要分享一款基于HTML5和CSS3的书本翻页3D动画，当我们将鼠标滑过书本时，书本就会自动一页页翻过去，书本的3D效果非常不错。

在线演示        源码下载

5、HTML5 3D骨牌图片特效 带文字描述

今天分享一款很特别的HTML5 3D图片特效，当鼠标滑过图片时，平面的图片即会呈现3D的效果，和这款HTML5 3D图片折叠特效类似，也是通过鼠标滑过来展现3D效果。另外，这款HTML5 3D骨牌图片特效还可以设置图片描述信息。

在线演示        源码下载

6、jQuery UI滑杆插件 可Tooltip提示

今天我们再来介绍一款实用的jQuery插件，是基于jQuery UI的。这款jQuery滑杆插件非常漂亮，可以设置多种颜色，再加上CSS3上运用，可以让滑杆的游标变得有立体感，滑杆的Tooltip提示框也出现飞入飞出的动画效果。更多jQuery插件可以移步至jQuery插件栏目。

在线演示        源码下载

7、CSS3个人资料表单 分两步骤表单

对于分步骤表单，我们之前也已经有过介绍了，像这款HTML5分步骤注册表单就非常不错，今天我们要来介绍另外一款分步骤表单，这是一款个人资料填写表单，我们可以分两步来填写个人资料，每一步的切换都有淡入淡出的动画效果，你也可以回退到上一步继续填写。

在线演示        源码下载

8、HTML5/CSS3仿Facebook登录表单

利用CSS3制作的登录表单的确很漂亮，我们在html5tricks网站上也分享过几款了，比如CSS3密码强度验证表单可以显示密码的强度，这款纯CSS3发光登录表单更是绚丽多彩。今天我们要分享一款仿Facebook的登录表单，无论从外观还是功能上说，这款登录表单还是挺接近Facebook登录表单的。

在线演示       源码下载

9、HTML5/CSS3超酷进度条 不同进度多种颜色

这是一款线条状的CSS3进度条，这款进度条有两个特点：一是随着进度条的进度更新，都会有数字百分比实时显示，让数据更加直观；二是在不同的进度阶段，进度条的颜色会有所变化，这样能更好的反应当前的进度状态。加上黑色的背景，让这款CSS3进度条更加鲜亮起来。

在线演示        源码下载

10、CSS3 3D发光切换按钮 模拟效果很逼真

刚刚我们发布过一款CSS3开关切换滑动按钮，应该说出了有点3D立体的效果外，其他都很普通。现在我们要来分享一款更酷的CSS3开关切换按钮，它不仅具有3D的效果，而且可以发光，当开关处于打开状态时，旁边的小灯就会亮起来，然后灯光投射到开关上，效果挺逼真的。

 

在线演示        源码下载

11、HTML5线性图表 图表数据区域可着色

利用HTML5制作图表插件也比较常见，我们也收集过几款很实用的HTML5图表插件，它们确实可以帮助我们在网页上直观地展示数据。今天我们要再来分享一款实用的HTML5线性图表插件，这款线性图表可以在不同的数据区域内绘制不同的颜色，让每一个数据区域都非常明显可见。

在线演示        源码下载

12、HTML5柱状图表 可合并多张图表的数据

之前我们分享过好几款不错的HTML5柱状图表了，像这款HTML5/CSS3水平柱状图表，非常简单实用的图表。今天我们要再来分享一款HTML5柱状图表，这款图表插件可以将多张图表的数据合并成一张图表显示，在图表数据合并过程中产生融入的动画，挺不错的。

在线演示        源码下载

13、HTML5/CSS3提示框Tooltip动画

之前我们已经分享过一款HTML5/CSS3分步提示框Tooltip ，不过这款提示框主要是用来分步操作提示的，不是真正的Tooltip。今天我们要分享一款利用CSS3实现的提示框Tooltip动画。当鼠标移到图标按钮上时，就会在按钮正上方弹出一个Tooltip提示框，并且伴有淡入淡出的效果。

在线演示        源码下载

14、HTML5/CSS3滑块动画菜单 图标动画很酷

CSS3菜单我们之前已经分享很多了，有3D菜单、下拉菜单、Tab菜单等，具体大家可以移步至CSS3菜单栏目下查找。今天我们要分享的这款HTML5/CSS3滑块动画菜单非常酷，鼠标滑过菜单项时会有一个漂亮的遮罩移动过来，并且这款动画菜单还有非常酷的图标，菜单整体效果很大气。

在线演示        源码下载

15、HTML5 Canvas画板画图工具 可定义笔刷和画布

HTML5 Canvas还有一个比较实用的应用，那就是网络画板，这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能，我们可以自定义笔刷的类型、粗细、颜色，也可以定义画布的大小和背景颜色等。我们也可以对这款HTML5画图工具进行扩展，让它的画图功能更加完善。

在线演示        源码下载