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

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

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

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

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

在线演示        源码下载

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

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

在线演示       源码下载

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

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

在线演示        源码下载


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


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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

 

在线演示        源码下载

七、CSS3我的资料表单 分两步骤表单

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

在线演示        源码下载


八、HTML5/CSS3仿Facebook登陆表单


利用CSS3制做的登陆表单的确很漂亮，咱们在html5tricks网站上也分享过几款了，好比CSS3密码强度验证表单能够显示密码的强度，这款纯CSS3发光登陆表单更是绚丽多彩。今天咱们要分享一款仿Facebook的登陆表单，不管从外观仍是功能上说，这款登陆表单仍是挺接近Facebook登陆表单的。

在线演示       源码下载

九、HTML5/CSS3超酷进度条 不一样进度多种颜色

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

在线演示        源码下载


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

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

 

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

1三、HTML5/CSS3提示框Tooltip动画

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

在线演示        源码下载

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

CSS3菜单咱们以前已经分享不少了，有3D菜单、下拉菜单、Tab菜单等，具体你们能够移步至CSS3菜单栏目下查找。今天咱们要分享的这款HTML5/CSS3滑块动画菜单很是酷，鼠标滑过菜单项时会有一个漂亮的遮罩移动过来，而且这款动画菜单还有很是酷的图标，菜单总体效果很大气。

在线演示        源码下载

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

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

在线演示        源码下载