五一假期结束，码农们又回到了正常的工作岗位上了，小编也未各位整理了10款很酷的HTML5动画和实用的HTML5应用，希望大家能够喜欢。
HTML5非常流行，利用HTML5制作动画也非常方便，今天要分享一款利用HTML5 Canvas制作的花朵生成器，我们只需要在Canvas画布上点击鼠标，即可动态生成各种颜色样式的花朵，并且每一朵花都可以缓慢地旋转，非常炫酷。
之前我们分享过几款相当不错的CSS3垂直菜单，比如清新小图标的HTML5/CSS3侧边栏菜单、CSS3侧边栏菜单 带可爱的小图标菜单等。今天介绍的一款CSS3菜单也是垂直菜单，是一款仿Google Play的垂直菜单，另外菜单左侧还有非常漂亮的小图标。
今天要分享的这款CSS3按钮效果非常不错，是一款3D的按钮特效，当按钮按下时，按钮便会凹陷下去，效果和之前分享的[......]
还记得当时分享的一款齿轮动画吗，一起来看看：HTML5物理实验 CSS3模拟齿轮转动，的确非常华丽。这次我们要分享一款纯CSS3实现的齿轮动画，这款齿轮动画可以用来做Loading动画，和其他的Loading动画相比，这个齿轮效果也还可以。
今天我们又要来分享一款实现简单的纯CSS3 3D动画效果，这款HTML5/CSS3动画是一个3D波浪形动画特效。利用一堆div加上CSS3对每个div的控制，实现波浪起伏的动画效果。这和之前分享的HTML5/CSS3 3D木块旋转动画的实现方式类似，大家可以参考一下css源代码。
分享按钮我们应该很熟悉了，在html5tricks上也分享过很多，像纯CSS3社会化分享按钮 可固定网页顶部、CSS3发光社会分享按钮 超酷CSS3按钮组合都非常不错。今天要分享的这款CSS3分享按钮外观比较特别，是环形的按钮，鼠标滑过时即可将环形展开，动画效果还不错。
CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局：
column-count: 列数目column-gap: 各列之间间隙宽度column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算column-rule-width：列之间分割线宽度column-rule-style：列之间分割线风格column-rule-color：列之间分割线演示column-span: 允许一个元素的宽度跨越多列column-fill: 分列方式要想制作出一个漂亮的分列布局，你至少需要用到column-count和column-gap：
/[......]
之前我们有分享过一款很酷的CSS3文字阴影插件HTML5/CSS3文字投影特效 乳白阴影文字效果，今天要分享的也是CSS3文字阴影效果，不同的是今天这款CSS3文字阴影的角度可以随着鼠标的移动而发生变化，即阴影可动态调整，非常实用。
这篇文章了我将介绍一下如何将一张图片拷贝到canvas里，以及反过来，如何将画布内容保存成图片格式。
要想将图片放入画布里，我们使用canvas元素的drawImage方法：
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
这里的0, 0参数画布上的坐标点，图片将会拷贝到这个地方。
如果你的画布上的作品已经完成，你可以用下面简单的方法将canvas数据转换成图片格式：
// Conver[......]
Bootstrap是Twitter推出的一个用于前端开发的开源工具包，基于Bootstrap框架，我们可以方便地制作漂亮的UI界面。今天要分享的这款CSS3下拉菜单就是基于Bootstrap的，下拉子菜单的外观也非常不错，同时菜单也具有3D立体的视觉效果。
下面我们一起来看看实现这款CSS3 3D菜单的过程和源码，代码主要由HTML、CSS和jQuery组成。
<nav class="navbar navbar-inverse" role="navigation"><div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#b[......]
这次要分享的一款HTML5/CSS3简易联系表单非常清新，整体外观不是那么华丽，但是表单扁平化的风格让人看了非常舒服，同时利用了HTML5元素的特性，表单的验证功能变得也相当简单。之前也分享过一款CSS3实现一款联系表单 输入框带小图标，效果也是比较震撼的。
