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

最终效果与总结

整个圣诞主题到这节都已经完全讲解完毕了，圣诞主题是基于HTML5+CSS+JS编写与实现的，同时也是七夕主题的故事延续。圣诞主题依旧延续着七夕主题设计的思路，引入了3个经典的场景页面，在每个场景中表述着不同的行为。实现上总结了之前七夕主题的一些经验与反馈，并在此之上加以优化与扩展。这个案例不算很难，但是把前端做动画的一些精髓已经讲透了。运用的技术基本就是H5+JS+CSS3，但是每个部分的实现都会有很多知识点的涉及，这里大体的总结下

具体我来归纳下改良的技术方案与涉及到的知识点：

  1. 为了处理自适应的问题，采用了新的rem布局代替百分比布局方案
  2. 采用了简单的面相对象编程，采用类的形式对每一个页面场景元素都做了一定的封装
  3. 引入了Observer观察者模式的处理机制
  4. 适当的引入svg概念，通过svg绘制矢量图
  5. 精灵动画部分依旧大量采用了css3 animation动画的steps关键帧，但是不同的是，解决了自适应雪碧图的问题
  6. 元素运动部分优化了css3 transform transition的使用
  7. 新增了video视频元素的运用
  8. 新增了3d旋转木马的效果实现
  9. 新增了canvas版的雪花实现
  10. 等等.............

要学的东西可不少了，学完整个课程后，你对前端是不是有更深入的理解呢？

ps：继续期待我的下一次课程吧~

任务

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/566a38a90001f17d00000000.css' />
  8.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/566a38f000016f0900000000.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <section class="container">
  13.         <!-- 第一幅画面 -->
  14.         <section class="page-a bg-adaptive">
  15.             <!-- 男孩 -->
  16.             <div class="chs-boy chs-boy-deer"></div>
  17.             <!-- 月亮 -->
  18.             <div class="moon"></div>
  19.             <!-- 云 -->
  20.             <div class="cloudy"></div>
  21.             <!-- 圣诞树 -->
  22.             <figure class="tree"></figure>
  23.             <!-- 星星 -->
  24.             <svg viewBox="0 0 512 486">
  25.                 <defs>
  26.                     <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%">
  27.                         <stop offset="0%" stop-color="#FCF0BC"></stop>
  28.                         <stop offset="0%" stop-color="#FCF0BC"></stop>
  29.                     </linearGradient>
  30.                 </defs>
  31.                 <polygon style="fill: url(#star);" points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
  32.             </svg>
  33.             <!-- 窗户 -->
  34.             <div class="window wood">
  35.                 <div class="window-bg"></div>
  36.                 <div class="window-content">
  37.                     <div class="window-left"></div>
  38.                     <div class="window-right"></div>
  39.                 </div>
  40.             </div>
  41.         </section>
  42.         <!-- 第二幅画面 -->
  43.         <section class="page-b bg-adaptive">
  44.             <!-- 猫 -->
  45.             <figure class="cat"></figure>
  46.             <!-- 小女孩 -->
  47.             <figure class="girl"></figure>
  48.             <!-- 圣诞男孩 -->
  49.             <figure class="christmas-boy-head"></figure>
  50.             <figure class="christmas-boy boy-walk"> </figure>
  51.             <!-- 旋转木马 -->
  52.             <div id="carousel">
  53.                 <figure id="spinner"></figure>
  54.             </div>
  55.         </section>
  56.         <!-- 第三幅画面 -->
  57.         <section class="page-c bg-adaptive">
  58.             <!-- 月亮 -->
  59.             <div class="moon"></div>
  60.             <!-- 云 -->
  61.             <div class="cloudy"></div>
  62.  
  63.             <!-- 星星 -->
  64.             <svg viewBox="0 0 512 486">
  65.                 <defs>
  66.                     <linearGradient id="star" x1="0%" y1="0%" x2="100%" y2="0%">
  67.                         <stop offset="0%" stop-color="#FCF0BC"></stop>
  68.                         <stop offset="0%" stop-color="#FCF0BC"></stop>
  69.                     </linearGradient>
  70.                 </defs>
  71.                 <polygon style="fill: url(#star);" points="256.814,12.705 317.205,198.566 512.631,198.566 354.529,313.435 414.918,499.295 256.814,384.427 98.713,499.295 159.102,313.435 1,198.566 196.426,198.566 "></polygon>
  72.             </svg>
  73.  
  74.             <!-- 圣诞树 -->
  75.             <figure class="tree treefix"></figure>
  76.             <!-- 鹿 -->
  77.             <figure class="deer"></figure>
  78.             <!-- 窗户关闭 -->
  79.             <div class="window wood">
  80.                 <!-- <div class="window-bg"></div> -->
  81.                 <div class="window-content" data-attr="red">
  82.                     <div class="window-scene-bg"></div>
  83.                     <div class="window-close-bg"></div>
  84.                     <div class="window-left hover"></div>
  85.                     <div class="window-right hover"></div>
  86.                 </div>
  87.             </div>
  88.             <!-- 雪花 -->
  89.             <canvas id="snowflake" style="position:absolute;z-index:999;"></canvas>
  90.         </section>
  91.     </section>
  92. </body>
  93.  
  94. </html>
  95.  
返回课程