今日励志语录有志者万念俱灰，无志者只觉困难。文章原始出处：腾讯ISUX，开始阅读前可以扫码体验demo1.CSS3时序交错淡入淡出动画这是一个比较常用的动画。它的优点是节奏感强。方法是先隐藏每个元素，并且每个元素在页面呈现时交错出现。示例（忽略兼容的前缀和不相关的属性）：效果是两个元素分别从顶部落下。这是一个小细节（关键帧）。为了使下落动画更加生动，应该在90%的时候先下落。点击，然后立即以100%的速度向后跳5像素。还有一个细节是Android2.3.*对-webkit-animation-fill-mode的支持不是很好，即渐变动画不能停在最后一帧。有这样的解决方案：1、使用Modernizr检测是否支持该属性，添加识别类.no-animation-fill-mode；2、根据识别类采取以下措施：（1）用js模拟同样的效果；(2)使用css来屏蔽动画；(3)或直接使用过渡来完成所有这些操作（无关键帧）。样例页面如下：2.CSS3DetailsEmphasizeAnimation有些局部细节如果还是淡入显示会显得乏味，比如标题，按钮等，需要一种强调。有两种情况：1.如果时间允许，基本的做法是先把一个元素切割成不同的块，比如把小人的手脚切割成不同的图片，然后让它们重新组合，然后赋予不同的CSSanimations为了形象化，举个webank的例子：2.如果时间紧，又没有Sonny那么擅长动画细节，可以借助一些辅助工具：Animate.css，直接选择需要的动画预览，然后下载它的CSS并把对应的关键帧摘掉（引用整个CSS是浪费资源）。3、SVG动画SVG技术越来越为人们所熟知，使用门槛也在逐渐降低，而且SVG动画也可以通过CSS来控制。可见SVG的强大！弥补了CSS3的不足。不过这种动画也有点费时，不过有一种比较常用的，就是画线动画。CSS3更难实现。这里可以使用SVG，介绍一个PS插件svgArtisan（目前还没有主页），这个工具可以直接根据Path图层为PSD生成SVG图形。接下来就简单了，使用插件为设计稿上的路径图形生成对应的SVG，例如：（注意不支持foreignObject标签中svg的浏览器会看到一个.m3-svg-的图片在nosupport标签下。）然后用CSS3动画控制stroke-dashoffset：这个效果不难！还有SVG的各种用途，比如制作ICONFONT等，可以深挖。4.重力陀螺让页面更有层次感，让设计提供一些零碎的元素，比如五颜六色的花朵、星星等，然后将它们单独裁剪出来，放在屏幕的前景中。使用陀螺仪随着手机的移动而移动。多么有趣！这里有一个可以轻松实现陀螺仪重力效果的工具：parallax.js使用简单，定义一个parallax-obj的父类，将需要移动的元素添加到layer类中，然后设置移动范围数据-depth:5.背景音乐&音效H5页面要酷，光有生动的图片是不够的。它必须伴随着生动的音乐。所以，可以主动和设计或者产品沟通，让他们提供音乐资源，分分钟UV暴涨！当然，配音乐，前端不直接引用，还是有一些要求的：1.音乐不能太长，30s最好，音乐要加淡入淡出效果便于循环播放；2、音乐音量要小，对于音质和流量，手机优先考虑流量。一般可接受的背景音乐音量在200K以下。如果太大，可以使用格式工厂等软件降低其码率和通道来改变音量。接下来简单引用一下：这里有个问题，IOS不能自动播放音乐，它必须触发用户交互事件，比如点击。但是有一个hack方法可以让IOS微信侧页自动播放（SAFARI依然无效）：通过一张新图片监听一张图片的onload事件，并在之后回调执行音频播放audio.play()end，原理估计是移动dom结构，相当于进行一次交互。（也有人用过createEvent模拟，原理就是移动dom。）所以，记得暴露一个音乐开关按钮，不然肯定会被骂死的。六、还有一个有趣的loading加载页面，如果用户网速慢怎么办？上面做了这么多事情，如果没有资源加载是没法玩的，所以还需要一个加载支持。一般情况下，如果页面大小大于3m，就需要添加加载页面。但是，加载仍然很有趣。一般的做法是：1、介绍一个品牌，比如一个APP的宣传页；2.引入有趣的动画，给你看一个廉价的角色跳舞；3.用CSS3动画让一切简单化。====总结====最后，我们以一个例子结束。这是空间5.0预订页面的第二个版本，它使用了上面的一些方法，比如加载动画、CSS3动画、SVG星空连接、首屏行星重力感应、音乐（这里使用打开按钮播放）等等。（因为活动结束了，很多操作都被删减简化了，忽略那些细节）当然，真正做到动态H5页面的高效制作，还是要靠积累，所以平时做的细节动图都是靠自己积累的，下次可以分分钟使用。扫一扫看效果打开微扫扫一扫关注早都君，每天早上为你推送前端知识，打发拥挤的地铁公交时间
