概述
我们在微信朋友圈里经常看到很多人分享h5的链接，有的科技感十足，有的展示炫目，有的非常有创意，各大公司也把h5作为他们品牌传播，活动预热的很好方式。企业商户对于这种方式也很有好感，从而导致了h5制作行业涌进大批从业者，同时也成为众多程序员赚取外快的途径。
现在说人话。。。
先来讲讲当前h5行业的现状吧！
h5制作网站
低门槛的h5制作平台，不懂代码的人也可以来玩玩，如果你有一定的设计思维和作图能力，也能做出非常好看的h5作品。
国内比较出名的h5制作网站有：
- 兔展：设计感和创意感最强的平台，但是制作相对复杂，需要设计基础。
- 易企秀：老牌的h5制作平台，不断迭代，有大量案例，使用别人做好的h5需要付费。生态圈还不错。
- 初页：手机app，手机端快速制作h5。
- Epub360意派：设计师友好，自称专业级的。
类似的平台还有很多，一直纳闷如此多同类产品是如何生存的，目前看易企秀通过付费制作的方式经营的还不错，但是淘宝上有很多仿该平台的源码，很便宜。未来的发展和商业模式并不明朗。
以上的几个公司主要关注的是展示营销类的h5，对于h5游戏涉猎不多。对于h5游戏做的比较好的火舞游戏，百度h5游戏中心，07073游戏 等。
好啦，什么商业模式，什么产品思维，什么设计理念，我们都不懂，我们就是写代码的，那就来干货吧，这样才能好好干活。
h5制作的相关技术
h5的动画受制于web浏览器的局限，基本有三种动画的实现方式。
- 基于css的动画实现
- 基于svg
- 基于canvas
- webgl
实践证明，当遇到复杂动画时，动画性能比较大致是这样的：svg < css < canvas < webgl
使用css实现：
css3确实要比过去强大很多，支持2d,3d的位移，缩放，透明度变化，旋转，过渡动画等，主要依赖css里的transform,transition,animation等属性，具体的使用方法参见w3school的教程。
需要注意的是 transition和animation不能同时作用于相同的元素.
当然也有很多的基于css的动画框架，让你快速构建动画。比较常用的有两类,css库和基于css动画的js库。
1.css库：css动画都是全局的，调用比较简单，但是侵入性比较强，固定模式，不太灵活。
- animated.css 最常用的低调的动画库
- hover.css 鼠标hover状态的动画库，移动端不可用
- magic animation 比animate.css 奔放的动画库，动画尺度大
- spinkit 几种css loading动画，不常用。
- buttons.css 炫酷的按钮动画库，尤其是3d的按钮，是你想要的。
2.js库