9-1 最终效果与总结
本节编程练习不计算学习进度，请电脑登录imooc.com操作

最终效果与总结

整个七夕主题到这节都已经完全讲解完毕了，最终会把所有设置的参数都合并到了confi配置文件中，同时也增加了一些配置，例如正比缩放，这样可以保持页面布局缩放看起来不会变型

这个案例不算很难，但是把前端做动画的一些精髓已经讲透了。运用的技术基本就是H5+JS+CSS3，但是每个部分的实现都会有很多知识点的涉及，这里大体的总结下

整个案例涉及的东西都是我们日常开发能够使用到的一些手段，希望可以通过这个案例把前端的一些方面的知识点给融合贯穿起来，从而得到系统透彻的理解，并且能有举一反三，融汇贯通的效果！

任务

index.html 
  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='http://img1.sycdn.imooc.com//down/55c16d94000109f300000000.css' />
  8.     <link rel='stylesheet' href='http://img1.sycdn.imooc.com//down/55c16dab0001286100000000.css' />
  9.     <link rel='stylesheet' href='http://img1.sycdn.imooc.com//down/55c16dc00001fa1a00000000.css' />
  10.     <link rel='stylesheet' href='http://img1.sycdn.imooc.com//down/55c16dda0001113100000000.css' />
  11.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.js"></script>
  12.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
  13.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55c16c910001e21b00000000.js"></script>
  14.  
  15.  
  16. </head>
  17.  
  18. <body>
  19.     <div id='content'>
  20.         <ul class='content-wrap'>
  21.             <!-- 第一副画面 -->
  22.             <li>
  23.                 <!-- 背景图 -->
  24.                 <div class="a_background">
  25.                     <div class="a_background_top"></div>
  26.                     <div class="a_background_middle"></div>
  27.                     <div class="a_background_botton"></div>
  28.                 </div>
  29.                 <!-- 云 -->
  30.                 <div class="cloudArea">
  31.                     <div class="cloud cloud1"></div>
  32.                     <div class="cloud cloud2"></div>
  33.                 </div>
  34.                 <!-- 太阳 -->
  35.                 <div id="sun"></div>
  36.             </li>
  37.             <!-- 第二副画面 -->
  38.             <li>
  39.                 <!-- 背景图 -->
  40.                 <div class="b_background"></div>
  41.                 <div class="b_background_preload"></div>
  42.                 <!-- 商店 -->
  43.                 <div class="shop">
  44.                     <div class="door">
  45.                         <div class="door-left"></div>
  46.                         <div class="door-right"></div>
  47.                     </div>
  48.                     <!-- 灯 -->
  49.                     <div class="lamp"></div>
  50.                 </div>
  51.                 <!-- 鸟 -->
  52.                 <div class="bird"></div>
  53.             </li>
  54.             <!-- 第三副画面 -->
  55.             <li>
  56.                 <!-- 背景图 -->
  57.                 <div class="c_background">
  58.                     <div class="c_background_top"></div>
  59.                     <div class="c_background_middle"></div>
  60.                     <div class="c_background_botton"></div>                
  61.                 </div>
  62.                 <!-- 小女孩 -->
  63.                 <div class="girl"></div>
  64.                 <div class="bridge-bottom">
  65.                     <div class="water">
  66.                         <div id="water1" class="water_1"></div>
  67.                         <div id="water2" class="water_2"></div>
  68.                         <div id="water3" class="water_3"></div>
  69.                         <div id="water4" class="water_4"></div>
  70.                     </div>
  71.                 </div>
  72.                 <!-- 星星 -->
  73.                 <ul class="stars">
  74.                     <li class="stars1"></li>
  75.                     <li class="stars2"></li>
  76.                     <li class="stars3"></li>
  77.                     <li class="stars4"></li>
  78.                     <li class="stars5"></li>
  79.                     <li class="stars6"></li>
  80.                 </ul>
  81.                 <!-- 慕课网logo图 -->
  82.                 <div class="logo"></div>
  83.             </li>
  84.         </ul>
  85.         <!-- 雪花 -->
  86.         <div id="snowflake"></div>
  87.         <!-- 小男孩 -->
  88.         <div id="boy" class="charector"></div>
  89.     </div>
  90. </body>
  91.  
  92. </html>
下一节