5-1 圣诞树、月亮与云
本节编程练习不计算学习进度，请电脑登录imooc.com操作

圣诞树、月亮与云

前面学了很多零碎的知识点，例如关键帧动画。这节我们将这个知识点用到实际的开发中。

第一个场景页面中，圣诞树、月亮、云都是基本纯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秒钟

index.htmlcommon.csspageA.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>圣诞主题</title>
  7.     <link rel='stylesheet' href='common.css' />
  8.     <link rel='stylesheet' href='pageA.css' />
  9. </head>
  10.  
  11. <body>
  12.     <section class="container">
  13.         <!-- 第一幅画面 -->
  14.         <section class="page-a bg-adaptive">
  15.             <!-- 月亮 -->
  16.             <figure class="moon"></figure>
  17.             <!-- 圣诞树 -->
  18.             <figure class="tree"></figure>
  19.             <!-- 云 -->
  20.             <figure class="cloudy"></figure>
  21.         </section>
  22.         <!-- 第二幅画面 -->
  23.         <section class="page-b bg-adaptive">
  24.         </section>
  25.         <!-- 第三幅画面 -->
  26.         <section class="page-c bg-adaptive">
  27.         </section>
  28.     </section>
  29.     <script type="text/javascript">
  30.         //rem设置
  31.         (function(doc, win) {
  32.             var docEl = doc.documentElement,
  33.                 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  34.                 recalc = function() {
  35.                     var clientWidth = docEl.clientWidth;
  36.                     if (!clientWidth) return;
  37.                     docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  38.                     //宽与高度
  39.                     document.body.style.height = clientWidth * (900 / 1440) + "px"
  40.                 };
  41.             win.addEventListener(resizeEvt, recalc, false);
  42.             doc.addEventListener('DOMContentLoaded', recalc, false);
  43.         })(document, window);
  44.     </script>
  45. </body>
  46.  
  47. </html>
  48.  
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. .container {
  7.     width: 100%;
  8.     height: 100%;
  9.     position: relative;
  10.     overflow: hidden;
  11. }
  12.  
  13. .bg-adaptive {
  14.     background-size: 100% 100%;
  15. } 
  16.  
  17.  
  1. /**
  2.  * 背景布置
  3.  */
  4. .container .page-a {
  5.     width  : 100%;
  6.     height : 100%;
  7.     background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png");
  8.     position: absolute;
  9.     z-index: 5;
  10. }
  11.  
  12. /**
  13.  * 圣诞树
  14.  * animation: name duration timing-function delay iteration-count direction;
  15.  */
  16.  
  17. .tree {
  18.     width: 2.71rem;
  19.     height: 4.24rem;
  20.     z-index: 15;
  21.     position: absolute;
  22.     bottom: 0;
  23.     left: 1rem;
  24.     background-image: url(http://img.mukewang.com/565d07d30001c97605420424.png);
  25.     background-size: 200% 100%;
  26.     /*?*/
  27. }
  28.  
  29. @-webkit-keyframes treeAnim {
  30.     0% {
  31.         background-position: 0% 100%;
  32.     }
  33.     100% {
  34.         background-position: -200% 100%;
  35.     }
  36. }
  37.  
  38. @-moz-keyframes treeAnim {
  39.     0% {
  40.         background-position: 0% 100%;
  41.     }
  42.     100% {
  43.         background-position: -200% 100%;
  44.     }
  45. }
  46. /*月亮*/
  47.  
  48. .moon {
  49.     background: #FCF0BC;
  50.     width: 2rem;
  51.     height: 2rem;
  52.     border-radius: 50%;
  53.     box-shadow: 0 0 1.5rem #FCF0BC;
  54.     position: absolute;
  55.     left: 3.3rem;
  56.     top: .8rem;
  57.     -webkit-animation: nucleus 2s infinite linear;
  58.     -moz-animation: nucleus 2s infinite linear;
  59. }
  60. /**
  61.  * 光晕效果
  62.  */
  63.  
  64. @-webkit-keyframes nucleus {
  65.     0% {
  66.         box-shadow: 0 0 0 transparent;
  67.     }
  68.     50% {
  69.         box-shadow: 0 0 1rem #FCF0BC;
  70.     }
  71.     100% {
  72.         box-shadow: 0 0 0 transparent;
  73.     }
  74. }
  75.  
  76. @-moz-keyframes nucleus {
  77.     0% {
  78.         box-shadow: 0 0 0 transparent;
  79.     }
  80.     50% {
  81.         box-shadow: 0 0 1rem #FCF0BC;
  82.     }
  83.     100% {
  84.         box-shadow: 0 0 0 transparent;
  85.     }
  86. }
  87.  
  88.  
  89. /*云*/
  90. .cloudy {
  91.     background: #60768D;
  92.     border-radius: 50%;
  93.     box-shadow: #60768D 1.2rem -0.2rem 0 -0.1rem, #60768D 0.5rem -0.5rem, #60768D 0.8rem 0.2rem,#60768D 1.5rem 0.2rem 0 -0.2rem;
  94.     height: 1rem;
  95.     width: 1rem;
  96.     position: absolute;
  97.     left: .5rem;
  98.     top: 1.8rem;
  99.     z-index: 5;
  100.     -webkit-animation: cloudy 5s ease-in-out infinite;
  101.     -moz-animation: cloudy 5s ease-in-out infinite;
  102. }
  103. @-webkit-keyframes cloudy {
  104.     50% {
  105.         -webkit-transform: translateY(-0.1rem);
  106.     }
  107. }
  108. @-moz-keyframes cloudy {
  109.     50% {
  110.         -moz-transform: translateY(-0.1rem);
  111.     }
  112. }
  113.  
下一节