介绍一个PS插件svgArtisan（现在还未有主页），这样的工具可以直接依据PSD的路径图层生成SVG图形。

接下来就简单了，将设计稿上的路径图形用插件生成对应的SVG，例如是这样子的：

（注意，其中的foreignObject标签内是不支持svg的浏览器会看到一张.m3-svg-nosupport标签下的图片。）

再使用CSS3的animation控制stroke-dashoffset：

成效不难吧！SVG还有多种用途，例如制作ICONFONT等，可以深入挖掘。

（4） 重力陀螺仪

想让页面更有层次感，不妨让设计提供一部分碎片元素，例如彩花，星星之类，然后把它们单独切出来放画面前景，使用陀螺仪伴伴随着手机运动碎片也跟着运动，多么好玩！

这里提供一个工具可以轻松实现陀螺仪重力成效的：parallax.js

用法简单，定义一个parallax-obj的父类，把必须要动的元素加上layer的类，然后设置动的范围data-depth：

（5） 背景音乐&音效

H5页面要炫酷，画面生动还是不够的，一定要配合生动的音乐。因此可以主动跟设计或产品交流，让他们可以提供音乐资源，分分钟使得UV猛涨有木有！

当然，有了音乐，前端也不是直接引用的，还是有点需求：

1.音乐不宜过长，30s为佳，而且音乐要加上渐现渐隐成效，方便循环播放；

2.音乐体积要小，音质和流量，在手机上还是优先考虑流量吧。

一般背景音乐体积可以接受的范围是200K以下，若太大，可以使用格式工厂等软件，降0它的比特率和声道来改变体积。

接着，只必须要简单引用：

这里有个问题，IOS是不能自动播放音乐的，一定要触发一个顾客交互事件，例如点击。

不过有一种hack的方法可以让IOS微信侧页面自动播放（SAFARI依旧无效）：

通过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()就可以，原理估计是动了dom结构，相当于执行了迅速交互。（有人也用过createEvent模拟，原理也是动了dom。）

因此，记得暴露一个音乐关闭/打开的按钮，不然一定被顾客骂死。

（6）有趣的Loading

Loading页还是要有的，万一顾客网速慢呢？

以上做了那么多事，假如没有资源加载全是玩不来的，因此还必须要一个loading的支持。一般情况下页面体积大于3m则要加上loading页。

然而loading还是可以做得很有趣的，一般的做法是：

1.引入品牌，例如APP宣传页；
2.引入有趣动画，放一个贱贱的人物跳舞给你看；
3.一切从简，用CSS3简单动画。

较后总结

较后，给一个例子结尾吧。

这是空间5.0预约页第二版，使用了以上的若干方法论，例如loading动画，CSS3动画，SVG星空连线，*屏星球重力感应，音乐（这里使用开启按钮后播放）等等。

（由于活动已结束，好多运营处都被删掉从简了，忽略那些细节）

（查看DEMO）

当然，真正要做到高效制作动态H5页面，还是靠积累，因此平时做好的细节动画自个都积累起来，下次分分钟就能用得上。

以上信息由新概念科技（上海网站开发，上海网站制作,上海网站制作）为您提供，越来越多精彩信息：http://www.jianzhan0.com/

关注“新概念科技”微信公众号，迅速获取互联网较新资讯