html5资源分享,12款实用的HTML5干货分享

本文作者html5tricks，转载请注明出处

今天我们要来分享12款实用的

1、漂亮的CSS3动画进度条 可自定义进度条颜色

今天我们要再来分享一款很漂亮的CSS3动画进度条，我们可以用它来显示每一项数据的所占的比例，效果很不错。之前我们也有分享过很多功能强大的纯CSS3进度条 华丽5色进度条示例、CSS3 SVG 进度条 Loading 动画 炫酷发光特效都和今天分享的这款比较类似，可以看看。

2、CSS3垂直图标菜单 带Tooltip提示框

今天我们要来分享一款CSS3二级下拉动画菜单 菜单背景滑动动画、纯CSS3垂直动画菜单等都是非常不错的CSS3垂直菜单按钮。

3、纯CSS3背景渐变按钮 按钮图标淡入淡出动画

今天我们要再来分享一款纯CSS3实现的按钮动画，这款按钮动画有以下特点：当鼠标滑过按钮时，按钮上的小图标便会以爆炸的方式淡出按钮，取代它的时相应的文字，当鼠标离开按钮时，小图标又会以爆炸的方式淡入按钮中。更多CSS3按钮栏目中查找。

4、

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

5、动感的CSS3 Loading文字特效

这是一款非常帅的CSS3 Loading加载动画，尽管看上去只有Loading这几个字母，但是利用CSS3特性，可以把这几个字母渲染得非常动感。和之前推荐的CSS3 Loading动画纯CSS3加载Loading动画图不同，这款Loading动画仅仅几个字母就可以展现令人震撼的效果。

6、CSS3多样式小图标按钮 带分享按钮

今天我们要来分享一款样式非常丰富的CSS3按钮目录下查看。

7、纯CSS3实现滑杆开关切换按钮动画

之前我们分享过一些CSS3开关切换按钮了，像这款CSS3 3D发光切换按钮、HTML5/CSS3开关按钮 立体3D按钮等。今天我们要再来分享一款纯CSS3实现滑杆开关切换按钮动画，这个按钮是一个摇杆，杆子推上推下来切换开关状态，不同的开关状态也有不同颜色的指示灯。

8、HTML5/CSS3牙刷动画 模拟真实刷牙效果

今天我们再要来分享一款不错的HTML5/CSS3动画效果，你一个可爱的牙刷，牙刷外观是利用纯CSS3绘制出来的，也比较简单。另外是刷牙动画，看起来非常搞笑，像真的刷牙一样，左刷刷，右刷刷，非常可爱的牙刷动画。

9、CSS3可视化网页编辑器 基于tinymce编辑器

上次我们分享过一款网页编辑器jQuery轻量级网页编辑器 选中即可编辑，配置比较简单。今天我们要来分享一款基于tinymce的CSS3可视化网页编辑器，编辑器功能相当完善，可以对文本进行各种操作，也可以添加链接和对齐文本。是一款功能更加强大网页编辑器。

10、CSS3实现一款联系表单 输入框带小图标

之前我们已经分享过一款非常漂亮的CSS3联系表单CSS3联系表单 背景透明迷人，有兴趣的朋友可以去看一下。今天我们再来分享一款外观还不错的CSS3联系表单，这款CSS3联系表单的输入框带有小图标，并且在提交信息时能校验输入的信息。

11、HTML5/CSS3多颜色柱状图表 带基准数据线

之前我们分享过几款很不错的HTML5柱状图表，像HTML5柱状图表 可合并多张图表的数据、HTML5/CSS3水平柱状图表。这次要分享的HTML5柱状图表也非常不错，它有多种颜色来表示不同的数据。最大的特点是这款HTML5带有基准数据线，可以直观地看到每个数据项相对基准值的偏差。

12、HTML5/CSS3图片描述效果 文字描述浮动在图片上

今天要分享一款基于HTML5和CSS3的图片特效，该图片特效非常实用，可以让你网页上的图片在鼠标滑过时在图片上方浮现一些描述文字，该描述文字在展现出来的时候有淡入淡出的动画效果，同时描述文字的样式也可以自定义多样化，是一款非常不错的HTML5图片特效。

以上就是12款实用的HTML5干货，欢迎收藏分享。