功能强大的最新HTML5特效实例

HTML5非常强大，今天我们再一次向大家分享8款功能强大的最新HTML5特效实例，包含菜单、图片、Canvas动画等，一起来欣赏吧。

1、HTML5 Canvas画板画图工具 可定义笔刷和画布

HTML5 Canvas还有一个比较实用的应用，那就是网络画板，这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能，我们可以自定义笔刷的类型、粗细、颜色，也可以定义画布的大小和背景颜色等。我们也可以对这款HTML5画图工具进行扩展，让它的画图功能更加完善。

在线演示 / 源码下载

2、HTML5梦幻特效 可给任意元素添加魔幻效果

我们之前介绍HTML5动画特效比较多的是HTML5 3D特效，今天我们来换一种风格，来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素（图片、文字等）添加这么一种效果，即鼠标滑过时，元素上就会出现非常魔幻的动画特效，什么特效呢？你可以点开demo链接查看。

在线演示 / 源码下载

3、CSS3波浪形菜单 结合背景超级绚丽

我们分享过许多各种各样的CSS3菜单，应该说效果都比传统的CSS菜单强悍。这次要分享的这款CSS3菜单有点特别，菜单的整体形状类似波浪形，鼠标滑过菜单项时也会改变背景色表示该菜单项被激活。另外该CSS3菜单结合不错的背景图片效果更加震撼。

在线演示 / 源码下载

4、HTML5播放器API集合 轻松学会HTML5播放器开发

之前我们分享了两款不错的HTML5播放器，分别是HTML5视频播放器Video.Js和HTML5播放器神话 卡带式古典播放器，效果都非常酷。今天我再分享一款最基本的HTML5视频播放器，这个播放器演示罗列了所有操作HTML5播放器的API，初学者可以更好的学习和使用HTML5播放器。

在线演示 / 源码下载

5、CSS3带图标提示插件 多主题颜色

在网页中，我们操作完耗时的操作，最好给用户一个提示，这个CSS3插件就实现这个提示功能。该CSS3提示功能有几种不同的颜色，并且每一个提示框都有一个指定的小图表。用户可以点击关闭按钮来关闭提示框，提示框出现淡出的CSS3效果。

在线演示 / 源码下载

6、HTML5 Canvas模拟翻滚动画 3D视觉效果

HTML5作为最先进的浏览器技术，可以创造出很多不同凡响的特效应用，尤其是3D动画更是轻而易举，大家可以在之前我们分享的HTML5动画栏目下欣赏到很多超酷的HTML5动画，也可以在HTML5 Canvas栏目下学习HTML5 Canvas应用的方法。今天要分享的这款HTML5 Canvas模拟翻滚动画特效给你呈现了不一样的3D视觉特效，一起来欣赏吧。

在线演示 / 源码下载

7、CSS3 Lava Lamp动画下拉菜单 菜单很简洁

之前我们分享过一些漂亮的CSS3菜单，来回顾一下：CSS3灰色按钮菜单、CSS3 飘带菜单等，大家可以前往CSS3菜单类目下查看演示和下载源码。今天我们分享的这款CSS3菜单也是下拉菜单，鼠标滑动到相应菜单项时，菜单项下方会滑过一条漂亮的线条。

在线演示 / 源码下载

8、HTML5/CSS3悬浮菜单 可自定义小图标

前些天我们分享过一款非常有特色的CSS3菜单HTML5/CSS3鬼脸表情下拉菜单，非常可爱。今天要分享的这款CSS3菜单是悬浮菜单，当鼠标滑过菜单项时，整一个菜单项即会悬浮上来。另外，菜单还允许你自定义漂亮的小图标，小图标也会悬浮上来，非常不错。

在线演示 / 源码下载

9、HTML5梦幻特效 可给任意元素添加魔幻效果

我们之前介绍HTML5动画特效比较多的是HTML5 3D特效，今天我们来换一种风格，来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素（图片、文字等）添加这么一种效果，即鼠标滑过时，元素上就会出现非常魔幻的动画特效，什么特效呢？你可以点开demo链接查看。

在线演示 / 源码下载

10、HTML5 Canvas正弦波动画 可自定义波长和速度

正弦波我们很熟悉，以前数学和物理课上经常会用到，还记得以前物理老师演示的正弦动画还是用flash制作的呢。今天我们要分享的这款HTML5 Canvas动画就和正弦波有关，我们可以稍稍修改一下HTML5代码即可定义波长、频率等正弦波的一些属性，很酷吧。

在线演示 / 源码下载

11、CSS3按钮发光动画 绚丽多彩

今天分享一款基于纯CSS3的发光按钮，多种色彩的按钮排列在网页上，伴随着闪闪发光的效果，CSS3的强大肯定会让你叹为观止。该CSS3按钮发光动画主要是利用了webkit的动画属性，让各种颜色规律性的发生变化。也许这么绚丽的CSS3按钮应用不那么广泛，但是在一些需要特效的网页中用来做提交表单按钮或者菜单项，那就非常方便了。

在线演示 / 源码下载

12、HTML5 WebGL水面水波荡漾特效

之前已经向各位分享过一款很逼真的HTML5水波荡漾特效，效果还算不错。今天再向大家分享一款更加给力的HTML5水波动画，画面上是一个大水池，水池底部是一颗大石头，在水面上点击即可泛起水波，加上模拟光的照射，水波比上一款特效更加生动逼真。另外你也可以拖动石头让其在池底滚动，也可以拖动画面多视角观看该HTML5水波动画。

在线演示 / 源码下载

13、HTML5树叶飘落动画

今天再来分享一款HTML5树叶飘落动画，这款HTML5树叶飘落动画是基于webkit内核的，所以需要webkit内核的浏览器才能播放该动画，效果真的非常酷。

在线演示 / 源码下载

14、HTML5 3D衣服摆动特效

前面我们介绍过很多HTML5 3D动画特效，最经典的要算HTML5 WebGL水面水波荡漾特效。今天我再向大家分享一款HTML5 3D衣服摆动动画特效，动画也是在HTML5 Canvas上完成，它模拟衣服晾在绳子上，点击鼠标可以让衣服摆动起来，就行风吹动它一样，非常逼真炫酷。

在线演示 / 源码下载

15、HTML5鲸鱼动画

之前看到过同样效果的一款鲸鱼动画，不过可惜的是那个动画是用flash制作的。今天我找到了基于HTML5的鲸鱼动画，鲸鱼会随着鼠标的移动而游动，画面非常立体，鲸鱼也超级逼真。真的，HTML5确实很给力，HTML5动画完全可以完成flash能做的事情。

在线演示 / 源码下载

16、纯CSS3 Android Logo动画绘制

利用CSS3可以绘制很多复杂的图案图标，今天就利用纯CSS3实现Android Logo图标，该CSS3 Android Logo主要利用了CSS3中的圆角等属性，绘制出来的Logo非常逼真，同时该Android Logo还有动画效果，鼠标滑过Android小人的头和手时，小手还能够挥动。

在线演示 / 源码下载

17、纯CSS3绘制可爱小男孩动画

之前我们分享过几个纯CSS3动画特效，比如纯CSS3人物行走动画就非常酷，还有纯CSS3 Android Logo动画绘制也很酷。今天我们又要来分享一款纯CSS3绘制的可爱小男孩动画，除了绘制的小男孩逼真可爱外，其面部表情也十分酷。整个动画是利用纯CSS3实现，没有用图片和JS，不知道你们的浏览器中效果怎么样。

在线演示 / 源码下载