前面学了很多零碎的知识点，例如关键帧动画。这节我们将这个知识点用到实际的开发中。
第一个场景页面中，圣诞树、月亮、云都是基本纯css的处理，所以在html中只需要定义一个元素节点，单位都采用rem。观看右边实际代码pageA.css部分与下面的理论结合学习
圣诞树：
关键帧动画的运用结合自适应雪碧图的处理，圣诞树是2张雪碧图，所以雪碧图只要缩放2倍，即background-size: 200% 100%;达到平铺的效果，而关键帧也只需要2帧切换，steps(2)，坐标从0%- 负200%切换
月亮：
通过css绘制的，通过width与height绘制一个正方形，然后设置border-radius: 50% 这样就可以达到圆形的效果。通过box-shadow设置一定的阴影，最后通过关键帧动画对box-shadow的值做一个变化的效果，就会出现光晕的感觉
云：
云的绘制稍微有一点点麻烦，观察下云，其实是由5个圆形图组成，在想同的位置重叠后的效果。同样的绘制月亮的办法，然后通过box-shadow绘制投影，绘制4个不同大小的圆形图，然后改变每一个的坐标位置，让其重叠在一起形成了最终的效果
在pageA.css的26代码位置写出圣诞树的样式代码
圣诞树是2个图切换，并且是无限循环，时间是1秒钟
-webkit-animation: treeAnim 1s steps(2) infinite;
-moz-animation: treeAnim 1s steps(2) infinite;
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
