CSS3动画页面制作（下）

延续上次讲的接下来实际制作一个常见的“CSS3动画头+内容+内容+内容”的页面，这样的页面应用范围也比较广，经常看到如腾讯游戏活动页面、迅雷、淘宝等，都是这样完成的，相对于比较静态单调的页面，更能让大家去接受，去阅读。 下面我就已迅雷的一个活动页面做范本。

  

demo页面

header 
我们先把整体框架页面讲完再讲顶部的css3动画

css部分
这里的图片是用的雪碧图（png小图和在一起的）所以用了background-position选择图片的位置

html部分cont01\cont02\cont03\cont04
下面的我们就直接过了，只把html放出来，css太长就不放出来了，因为重点在下面的css3上。最后我还是会把这个页面的代码打包给大家的。

html部分

CSS3动画

太阳
这里有几个要注意的 一要加浏览器的兼容前缀，上一次有提到。二要注意关键帧的名字。三注意关键帧的应用。
-webkit-是兼容Safari 和 Chrome的前缀 
@keyframes 动画的名称：fadeln；完成周期是1.5秒；延迟1秒，后开始； 速度曲线ease（默认。动画以低速开始，然后加快，在结束前变慢）；规定动画在播放之前或之后都被应用
关键帧0%的时候透明度为0，Y轴向上偏离50像素， 关键帧80%的时候透明度100%Y轴向下偏离2像素， 关键帧100%回到原始位置

循环飘动的云
这个是无限循环播放，要注意关键帧的点的位置。infinite这个是无限循环；alternate轮流反向播放
@keyframes 动画的名称：float；完成周期是6秒； 速度曲线linear 匀速运动；无限循环播放；轮流反向播放 
关键帧0%时X轴在原点；关键帧33%时X轴上向右偏离80像素； 关键帧66%复位原点；关键帧100%X轴上向左偏离80像素

3d飘带
这个关键帧有点不同，但不多讲了想了解的可以去W3C上看

大字

小字和时间人物
transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转;scale是指放大缩小默认是1

总结：

css3熟悉以后还好，刚开始肯定有点搞，也可以借助工具，上次讲到的动画库animate.css，也还可以借助个人蛮喜欢的腾讯的动画工具来使用。好了，CSS3动画篇到这里就告一段落了。希望你们喜欢哈，发现蛮多人看了关注了也不问啥，可以和我互动下，会与不会的我都会回答的。

下次就要开始讲移动端的一些事了，会分享给大家一些注意点啊，框架啊，一些比较好的东西，还会涉及到js。每次写东西不是想到什么就写。而是我自己也在学，所以可以多留言，一些互相进步。