前面的课程都相对复杂点，要么有点算法要么就是异步，这一节是具体的一个太阳效果，主要用CSS3的动画实现的。
页面中间有个太阳，出现在中间然后慢慢的向西边落下去
太阳的变化完全是靠CSS3的处理的，没要用到任何JS代码
CSS3的animation会有8个属性去定义一个动画的一些参数，这里只针对使用的方法做讲解
animation-name
规定要绑定的keyframes的名称，随便你取，不过为了日后维护的方便，建议取一个跟动作相关名称相近的名称比较好
animation-duration
规定完成这个动画所需要的时间
动画定义上面两个参数就可以变化，因为其余的都会自己的默认参数
Keyframes 中，每一组动画都可以赋予一个名称，通过它可以灵活地定义元素要执行的动画，这里观察下太阳只是一个X与Y轴的变化，所以只会用到translate就可以了，只需要编写一个translate变化的关键帧
虽然很简单，但是也需要实际动手去写写也会有一些细节的地方，注意要针对不同浏览器加上不同的前缀，webkit,moz
打开index.html文件，在代码的39和43行填入相应代码，可以观察到太阳的变化
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-2000px) translateY(400px);
}
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
