大家好，我是开源小星呀！
各位如果是前端开发者，应该对HTML5动画不会陌生，包括一些很酷的WebGL动画、实用的菜单按钮动画，还有一些小游戏、焦点图等精美应用。
今天小星为大家整了一些轻松的HTML5开源项目，10个效果炫酷的HTML5动画。
这些都不需要你动脑，今天不讲代码，我将它们做成了gif动画，你只需静静看完即可。
如果有哪几个比较喜欢，想在项目中使用，文末也有源码下载链接。
好了，不废话，我们开始吧！
Canvas五彩斑斓烟花动画
快过年了，将这个动画放在第一个，庆祝新年，也提前祝大家新春快乐！这个HTML5烟花动画采用canvas绘制的方式实现，以及一些数学公式的应用，我说过了，今天不讲代码，说实话这个会让你很烧脑。
Web音乐播放器
尽管个人博客、个人空间的时代已经过去了，那时候这种音乐播放器别提多流行了，在自己的个人空间上整一个立即让自己的ip提一个档次。我觉得只要网页仍然是大部分网民的互联网入口，那么这种实用的工具一定还是有其用武之地的，暂且收藏着吧，说不定以后用得着呢。
GSAP个性化单选框动画
这是一个很有个性的单选框动画，采用了GSAP动画框架，在选项切换的时候，背景将会出现发光抖动的动画效果。你也可以将它当作tab菜单组件使用。
SVG完成事件弹出动画
这是一个SVG实现的完成动画，当我们在页面中完成某些操作时，可以采用这个动画提示用户，既简洁大方，又高端时尚，使用也非常方便。
CSS文本渐变动画
从gif图上可以看出，实现这种CSS文字渐变色动画主要采用了css的线性渐变属性、背景剪切属性以及文本填充属性，原理相对比较简单，聪明的你应该能很快学会。
WebGL小球碰撞动画
WebGL也不算什么新的技术，现在基本上所有的浏览器都对WebGL支持很好了。在Web上直接利用GPU的性能，特别适合做一些帧率要求很高的动画。
CSS动画图标导航
这是一个很酷的图标导航组件，采用CSS实现鼠标滑过菜单项时的透明渐变效果以及菜单项选中后的高亮显示。这个并不适合做主菜单，因为没有文本描述，它比较适合一些图标意义比较明确的操作菜单。
CSS文字加载动画
这款文字加载动画比较朴素简单，但我认为还是很实用的，而且它采用纯CSS实现，代码也很简洁。
CSS发光按钮动画
这款按钮特别适合在深色主题的网页中应用，因为它的边缘内部会出现环绕发光的动画特效，同样这款按钮也是采用纯CSS实现的。
JS图片层叠切换动画
这款图片切换动画比较适合产品封面图片的轮播展示，这里图片的倾斜和转动通过CSS实现，切换动画则是使用简单的JavaScript实现，整体切换比较平滑。
源码下载
关注下面公众号，发消息“6002”获取源码下载链接
