精选19款华丽的HTML5动画和实用案例

下面是本人收集的19款超酷HTML5动画和实用案例，以为不错，分享给你们。

一、HTML5 Canvas火焰喷射动画效果

还记得之前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效，今天咱们要来分享一款相似的HTML5动画效果，一款基于HTML5 Canvas火焰喷射动画。用鼠标拖动一条直线，直线长度表示火焰喷射的力度，另外，火焰在运动中还能够反射效果哦。

在线演示        源码下载

二、HTML5 3D立方体旋转动画

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

在线演示        源码下载

三、HTML5/CSS3实现大风车旋转动画

此次咱们要来分享一款很酷的HTML5动画，是一个能够旋转的大风车动画效果，回顾一下利用HTML5实现的旋转动画，咱们能够看HTML5/CSS3实现3D旋转陀螺动画，它们的实现都是利用CSS3的transform:rotate属性，这款大风车动画的确比较厉害的。

在线演示        源码下载

四、HTML5小车动画 很酷的HTML5吉普车

有几天没有分享HTML5动画了，以前不少HTML5动画都是利用CSS3的一些特性和Canvas特性来完成，好比这个HTML5/CSS3实现蝙蝠侠人物动画就利用CSS3的动画特性，HTML5 Canvas模拟衣服撕扯动画就利用了HTML5 Canvas特性。今天咱们要分享一款利用HTML5/CSS3实现的吉普车动画，小车能够水平滚动，很是逼真。

在线演示        源码下载

五、纯CSS3 3D图片翻转展现 图片3D阴影效果

以前咱们分享过一些HTML5图片3D效果，这篇文章分享10款效果惊艳的HTML5图片特效中咱们能够看到不少3D的图片特效。今天咱们再来分享一款利用纯CSS3实现的3D图片翻转展现特效，点击图片或者下方的翻页按钮便可选中相应的图片，并实现翻转展现效果。

在线演示        源码下载

六、HTML5摆动的文字特效 相似柳枝摆动

以前咱们在html5tricks上分享过一些HTML5文字特效，像这款HTML5/CSS3 3D文字特效 文字外翻效果，像这款HTML5像素文字爆炸重组动画特效都很是有特点。今天咱们来分享一款能够摆动的HTML5文字特效，文字垂直下垂，并能够在微风中微微摆动，就像春风中的柳枝同样。

在线演示        源码下载

七、HTML5/CSS3 3D木块旋转动画

今天咱们要来分享一款迷人的HTML5/CSS3 3D旋转动画，这款3D动画的主角是一根根小木条，每根小木条都会旋转，小木条之间的旋转有必定的间隔，这样就会有一种螺旋的视觉效果。另外，和以前分享的HTML5 3D动画同样，也是利用了CSS3的transform属性，点击这里能够查看更多HTML5 3D特效。

在线演示        源码下载

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

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

在线演示        源码下载

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

今天咱们要来分享一款CSS3菜单，菜单外观很漂亮，是垂直排列的小图标，鼠标滑过菜单项时，菜单项的背景会填充渐变的颜色，另外还会弹出该菜单项描述的Tooltip提示框。以前咱们也分享过不少CSS3垂直菜单，像这款CSS3二级下拉动画菜单 菜单背景滑动动画、纯CSS3垂直动画菜单等都是很是不错的CSS3垂直菜单按钮。

在线演示        源码下载

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

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

在线演示        源码下载

十一、HTML5 3D立方体旋转动画

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

在线演示        源码下载

十二、动感的CSS3 Loading文字特效

这是一款很是帅的CSS3 Loading加载动画，尽管看上去只有Loading这几个字母，可是利用CSS3特性，能够把这几个字母渲染得很是动感。和以前推荐的CSS3 Loading动画纯CSS3加载Loading动画图不一样，这款Loading动画仅仅几个字母就能够展示使人震撼的效果。

在线演示        源码下载

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

今天咱们要来分享一款样式很是丰富的CSS3按钮特效，这些按钮的外观有点仿谷歌的风格，并且每个按钮带有个性的小图标。另外按钮有一个特色，还能够定制出不错的分享按钮。以前咱们也分享过很多漂亮的CSS3按钮，你们能够在CSS3按钮目录下查看。

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

上次咱们分享过一款网页编辑器jQuery轻量级网页编辑器 选中便可编辑，配置比较简单。今天咱们要来分享一款基于tinymce的CSS3可视化网页编辑器，编辑器功能至关完善，能够对文本进行各类操做，也能够添加连接和对齐文本。是一款功能更增强大网页编辑器。

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载