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

下面是本人收集的19款超酷HTML5动画和实用案例，觉得不错，分享给大家。

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

5、纯CSS3 3D图片翻转展示 图片3D阴影效果

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

在线演示        源码下载

6、HTML5摆动的文字特效 类似柳枝摆动

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

12、动感的CSS3 Loading文字特效

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

在线演示        源码下载

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

今天我们要来分享一款样式非常丰富的CSS3按钮特效，这些按钮的外观有点仿谷歌的风格，而且每一个按钮带有个性的小图标。另外按钮有一个特点，还可以定制出不错的分享按钮。之前我们也分享过不少漂亮的CSS3按钮，大家可以在CSS3按钮目录下查看。

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载

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

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

在线演示        源码下载