本文介绍了几个很酷的HTML5动画演示和详细的源代码讲解。

使用HTML5可以绘制许多静态图像和制作一些很酷的动画。本文分享了8个利用HTML5和CSS3实现的动画演示，也分享了源代码供大家参考。

1，HTML5 3D点阵列波浪翻滚动画这个HTML5画布动画非常壮观，给人一种破浪的视觉效果。

下载在线演示源代码

2、纯CSS3实现灯光开关按键这个按键很有个性，外观类似于老式的灯光开关，但由于是黑色背景，整个按键给人一种夜光的效果。

下载在线演示源代码

3.纯CSS3绘制的火龙图像。这是纯CSS3绘制的又一个动画特效。这次是纯CSS3绘制的火龙图像。全龙不用一张图，充分利用了CSS3的特点。小火龙的样子很逼真，你不觉得吗？

下载在线演示源代码

4.纯CSS3天气动画图标这是一个用纯CSS3绘制的动画图标，描述了各种天气情况，类似于天气预报。

下载在线演示源代码

5.纯CSS3实现了角色摇头的动画。这次要分享的是一个纯CSS3角色摇头的超萌动画。在初始化时，角色的所有部分都通过使用CSS3的动画效果进行拼接。接下来角色听歌的场景，一边听歌一边摇头，非常陶醉，周围还会有跳音符动画。

下载在线演示源代码

6、纯CSS3实现3D效果iPhone 6动画这款纯CSS3的iPhone 6无论从哪个角度看都相当逼真。

下载在线演示源代码

7.点击纯CSS3立体动画菜单的菜单项，分享一个纯CSS3实现的立体动画菜单。这个菜单的实现非常简单，没有太多的特效渲染，但是看起来非常干净漂亮，尤其是灰黑色的背景，让菜单看起来有点立体感。另外，当我们点击菜单项时，菜单项会有内阴影的视觉效果。

下载在线演示源代码

8.纯CSS3绘制的黑色图标按钮组合这是一个基于纯CSS3的图标组合。有了CSS3，我们基本上可以画出网页上所有的矢量图形，因为我们可以用CSS3的外观来画曲线。这个图标是黑色样式，几个复杂的图案需要用多层CSS代码实现。大多数图标都比较容易绘制。

下载在线演示源代码