7-3 运动的轨迹处理
本节编程练习不计算学习进度，请电脑登录imooc.com操作

运动的轨迹处理

第三幅页面中，小男孩需要走到桥上与小女孩汇合，那么小男孩走路的这个运动轨迹是由上桥与桥上直行的两个动作组成，如果是在知道距离比的情况下，我们当然可以用一条keyframes处理掉，但是由于人物采用background-position的关系，所以最终只能采用JS精确处理了，为了让效果看起来更自然，在实现上会写3个translate的动画

动作可以分解：走到桥边，上桥，桥上直行三个动作构成，会涉及到3个translate的距离算法了

三段路的计算都是以小女孩为参考点，小男孩的最终坐标计算就是

top  = girl.getPosition().top
left = girl.getPosition().left - boy.getWidth()

把这个最终的值分成三部分去处理了，也就是到桥边，上桥，桥上直行的坐标了

调用walkTo的接口，通过传递不同的时间、left、top的值来形成人物走路的动画

第一段路：2秒钟走到页面left=15%的位置
第二段路：1.5秒走到页面left=25%的位置,top就是小女孩的top位置
第三段路: 1.5秒走到小女孩的的面前

注意了，walkTo接口接受的是一个页面宽的比例值，所以就算算出了实际宽度，也需要转化成比例，这个接口是这样处理的。

任务

在代码编辑器index.html文件中第137行填写相应代码，使小男孩走完第三段路

return boy.walkTo(1500, proportionX);
index.htmlQixi.jsSwipe.jsstyle.csspageA.csspageB.csspageC.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='style.css' />
  8.     <link rel='stylesheet' href='pageA.css' />
  9.     <link rel='stylesheet' href='pageB.css' />
  10.     <link rel='stylesheet' href='pageC.css' />
  11.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  12.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
  13. </head>
  14.  
  15. <body>
  16.     <div id='content'>
  17.         <ul class='content-wrap'>
  18.             <!-- 第一副画面 -->
  19.             <li>
  20.                 <!-- 背景 -->
  21.                 <div class="a_background">
  22.                     <div class="a_background_top"></div>
  23.                     <div class="a_background_middle"></div>
  24.                     <div class="a_background_botton"></div>
  25.                 </div>
  26.                 <!-- 云 -->
  27.                 <div class="cloudArea">
  28.                     <div class="cloud"></div>
  29.                     <div class="cloud"></div>
  30.                 </div>
  31.                 <!-- 太阳 -->
  32.                 <div id="sun"></div>
  33.             </li>
  34.             <!-- 第二副画面 -->
  35.             <li>
  36.                 <!-- 背景图 -->
  37.                 <div class="b_background"></div>
  38.                 <div class="b_background_preload"></div>
  39.                 <!-- 商店 -->
  40.                 <div class="shop">
  41.                     <div class="door">
  42.                         <div class="door-left"></div>
  43.                         <div class="door-right"></div>
  44.                     </div>
  45.                     <!-- 灯 -->
  46.                     <div class="lamp"></div>
  47.                 </div>
  48.                 <!-- 鸟 -->
  49.                 <div class="bird"></div>
  50.             </li>
  51.             <!-- 第三副画面 -->
  52.             <li>
  53.                 <!-- 背景图 -->
  54.                 <div class="c_background">
  55.                     <div class="c_background_top"></div>
  56.                     <div class="c_background_middle"></div>
  57.                     <div class="c_background_botton"></div>
  58.                 </div>
  59.                 <!-- 小女孩 -->
  60.                 <div class="girl"></div>
  61.                 <!-- 水波 -->
  62.                 <div class="bridge-bottom">
  63.                     <div class="water">
  64.                         <div id="water1" class="water_1"></div>
  65.                         <div id="water2" class="water_2"></div>
  66.                         <div id="water3" class="water_3"></div>
  67.                         <div id="water4" class="water_4"></div>
  68.                     </div>
  69.                 </div>
  70.                 <!-- 星星 -->
  71.                 <ul class="stars">
  72.                     <li class="stars1"></li>
  73.                     <li class="stars2"></li>
  74.                     <li class="stars3"></li>
  75.                     <li class="stars4"></li>
  76.                     <li class="stars5"></li>
  77.                     <li class="stars6"></li>
  78.                 </ul>
  79.             </li>
  80.         </ul>
  81.         <div id="boy" class="charector"></div>
  82.     </div>
  83.     <div class="button">
  84.         <button>开始</button>
  85.     </div>
  86. </body>
  87. <script type="text/javascript">
  88. $(function() {
  89.     ////////
  90.     //小女孩 //
  91.     ////////
  92.     var girl = {
  93.         elem: $('.girl'),
  94.         getHeight: function() {
  95.             return this.elem.height();
  96.         },
  97.         // 转身动作
  98.         rotate: function() {
  99.             this.elem.addClass('girl-rotate');
  100.         },
  101.         setOffset: function() {
  102.             this.elem.css({
  103.                 left: visualWidth / 2,
  104.                 top: bridgeY - this.getHeight()
  105.             });
  106.         },
  107.         getOffset: function() {
  108.             return this.elem.offset();
  109.         },
  110.         getWidth: function() {
  111.             return this.elem.width();
  112.         }
  113.     };
  114.     // 修正小女孩位置
  115.     girl.setOffset();
  116.  
  117.     //////////
  118.     // 小孩走路 //
  119.     //////////
  120.     var boy = BoyWalk();
  121.  
  122.     boy.setFlolerWalk();
  123.  
  124.     // 开始
  125.     $("button:first").click(function() {
  126.  
  127.         // 第一次走路到桥底边left,top
  128.         boy.walkTo(2000, 0.15)
  129.             .then(function() {
  130.                 // 第二次走路到桥上left,top
  131.                 return boy.walkTo(1500, 0.25, (bridgeY - girl.getHeight()) / visualHeight);
  132.             })
  133.             .then(function() {
  134.                 // 实际走路的比例
  135.                 var proportionX = (girl.getOffset().left - boy.getWidth() + girl.getWidth() / 5) / visualWidth;
  136.                 // 第三次桥上直走到小女孩面前
  137.                 // ？
  138.             }).then(function() {
  139.                 // 图片还原原地停止状态
  140.                 boy.resetOriginal();
  141.             });
  142.     })
  143.  
  144.  
  145. })
  146. </script>
  147. <script type="text/javascript" src="Swipe.js"></script>
  148. <script type="text/javascript" src="Qixi.js"></script>
  149.  
  150. </html>
  1. ///////////
  2.     //灯动画 //
  3.     ///////////
  4.     var lamp = {
  5.         elem: $('.b_background'),
  6.         bright: function() {
  7.             this.elem.addClass('lamp-bright');
  8.         },
  9.         dark: function() {
  10.             this.elem.removeClass('lamp-bright');
  11.         }
  12.     };
  13.  
  14.     var container = $("#content");
  15.     var swipe = Swipe(container);
  16.     visualWidth = container.width();
  17.     visualHeight = container.height();
  18.  
  19.     // 页面滚动到指定的位置
  20.     function scrollTo(time, proportionX) {
  21.         var distX = visualWidth * proportionX;
  22.         swipe.scrollTo(distX, time);
  23.     }
  24.  
  25.     // 获取数据
  26.     var getValue = function(className) {
  27.         var $elem = $('' + className + '');
  28.         // 走路的路线坐标
  29.         return {
  30.             height: $elem.height(),
  31.             top: $elem.position().top
  32.         };
  33.     };
  34.  
  35.     // 桥的Y轴
  36.     var bridgeY = function() {
  37.         var data = getValue('.c_background_middle');
  38.         return data.top;
  39.     }();
  40.  
  41.     ////////
  42.     //小女孩 //
  43.     ////////
  44.     var girl = {
  45.         elem: $('.girl'),
  46.         getHeight: function() {
  47.             return this.elem.height()
  48.         },
  49.         setOffset: function() {
  50.             this.elem.css({
  51.                 left: visualWidth / 2,
  52.                 top: bridgeY - this.getHeight()
  53.             });
  54.         }
  55.     };
  56.  
  57.     // 修正小女孩位置
  58.     girl.setOffset();
  59.  
  60.  
  61.     // 用来临时调整页面
  62.     swipe.scrollTo(visualWidth * 2, 0);
  63.  
  64.  
  65.     function doorAction(left, right, time) {
  66.         var $door = $('.door');
  67.         var doorLeft = $('.door-left');
  68.         var doorRight = $('.door-right');
  69.         var defer = $.Deferred();
  70.         var count = 2;
  71.         // 等待开门完成
  72.         var complete = function() {
  73.             if (count == 1) {
  74.                 defer.resolve();
  75.                 return;
  76.             }
  77.             count--;
  78.         };
  79.         doorLeft.transition({
  80.             'left': left
  81.         }, time, complete);
  82.         doorRight.transition({
  83.             'left': right
  84.         }, time, complete);
  85.         return defer;
  86.     }
  87.  
  88.     // 开门
  89.     function openDoor() {
  90.         return doorAction('-50%', '100%', 2000);
  91.     }
  92.  
  93.     // 关门
  94.     function shutDoor() {
  95.         return doorAction('0%', '50%', 2000);
  96.     }
  97.  
  98.     /**
  99.      * 小孩走路
  100.      * @param {[type]} container [description]
  101.      */
  102.     function BoyWalk() {
  103.  
  104.         var container = $("#content");
  105.         // 页面可视区域
  106.         var visualWidth = container.width();
  107.         var visualHeight = container.height();
  108.  
  109.         // 获取数据
  110.         var getValue = function(className) {
  111.             var $elem = $('' + className + '');
  112.             // 走路的路线坐标
  113.             return {
  114.                 height: $elem.height(),
  115.                 top: $elem.position().top
  116.             };
  117.         };
  118.         // 路的Y轴
  119.         var pathY = function() {
  120.             var data = getValue('.a_background_middle');
  121.             return data.top + data.height / 2;
  122.         }();
  123.  
  124.         var $boy = $("#boy");
  125.         var boyWidth = $boy.width();
  126.         var boyHeight = $boy.height();
  127.  
  128.         //设置下高度    
  129.         $boy.css({
  130.             top: pathY - boyHeight + 25
  131.         });
  132.  
  133.         // 暂停走路
  134.         function pauseWalk() {
  135.             $boy.addClass('pauseWalk');
  136.         }
  137.  
  138.         // 恢复走路
  139.         function restoreWalk() {
  140.             $boy.removeClass('pauseWalk');
  141.         }
  142.  
  143.         // css3的动作变化
  144.         function slowWalk() {
  145.             $boy.addClass('slowWalk');
  146.         }
  147.  
  148.         // 用transition做运动
  149.         function stratRun(options, runTime) {
  150.             var dfdPlay = $.Deferred();
  151.             // 恢复走路
  152.             restoreWalk();
  153.             // 运动的属性
  154.             $boy.transition(
  155.                 options,
  156.                 runTime,
  157.                 'linear',
  158.                 function() {
  159.                     dfdPlay.resolve(); // 动画完成
  160.                 });
  161.             return dfdPlay;
  162.         }
  163.  
  164.         // 开始走路
  165.         function walkRun(time, dist, disY) {
  166.             time = time || 3000;
  167.             // 脚动作
  168.             slowWalk();
  169.             // 开始走路
  170.             var d1 = stratRun({
  171.                 'left': dist + 'px',
  172.                 'top': disY ? disY : undefined
  173.             }, time);
  174.             return d1;
  175.         }
  176.  
  177.  
  178.         // 走进商店
  179.         function walkToShop(runTime) {
  180.             var defer = $.Deferred();
  181.             var doorObj = $('.door')
  182.             // 门的坐标
  183.             var offsetDoor = doorObj.offset();
  184.             var doorOffsetLeft = offsetDoor.left;
  185.             var doorOffsetTop = offsetDoor.top;
  186.             // 小孩当前的坐标
  187.             var posBoy = $boy.position();
  188.             var boyPoxLeft = posBoy.left;
  189.             var boyPoxTop = posBoy.top;
  190.  
  191.             // 中间位置
  192.             var boyMiddle = $boy.width() / 2;
  193.             var doorMiddle = doorObj.width() / 2;
  194.             var doorTopMiddle = doorObj.height() / 2;
  195.  
  196.  
  197.             // 当前需要移动的坐标
  198.             instanceX = (doorOffsetLeft + doorMiddle) - (boyPoxLeft + boyMiddle);
  199.  
  200.             // Y的坐标
  201.             // top = 人物底部的top - 门中见的top值
  202.             instanceY = boyPoxTop + boyHeight - doorOffsetTop + (doorTopMiddle);
  203.  
  204.             // 开始走路
  205.             var walkPlay = stratRun({
  206.                 transform: 'translateX(' + instanceX + 'px),translateY(-' + instanceY + 'px),scale(0.5,0.5)',
  207.                 opacity: 0.1
  208.             }, 2000);
  209.             // 走路完毕
  210.             walkPlay.done(function() {
  211.                 $boy.css({
  212.                     opacity: 0
  213.                 });
  214.                 defer.resolve();
  215.             });
  216.             return defer;
  217.         }
  218.  
  219.         // 走出店
  220.         function walkOutShop(runTime) {
  221.             var defer = $.Deferred();
  222.             restoreWalk();
  223.             // 开始走路
  224.             var walkPlay = stratRun({
  225.                 transform: 'translateX(' + instanceX + 'px),translateY(0),scale(1,1)',
  226.                 opacity: 1
  227.             }, runTime);
  228.             // 走路完毕
  229.             walkPlay.done(function() {
  230.                 defer.resolve();
  231.             });
  232.             return defer;
  233.         }
  234.  
  235.  
  236.         // 计算移动距离
  237.         function calculateDist(direction, proportion) {
  238.             return (direction == "x" ?
  239.                 visualWidth : visualHeight) * proportion;
  240.         }
  241.  
  242.         return {
  243.             // 开始走路
  244.             walkTo: function(time, proportionX, proportionY) {
  245.                 var distX = calculateDist('x', proportionX)
  246.                 var distY = calculateDist('y', proportionY)
  247.                 return walkRun(time, distX, distY);
  248.             },
  249.             // 走进商店
  250.             toShop: function() {
  251.                 return walkToShop.apply(null, arguments);
  252.             },
  253.             // 走出商店
  254.             outShop: function() {
  255.                 return walkOutShop.apply(null, arguments);
  256.             },
  257.             // 停止走路
  258.             stopWalk: function() {
  259.                 pauseWalk();
  260.             },
  261.             setColoer: function(value) {
  262.                 $boy.css('background-color', value);
  263.             },
  264.             // 获取男孩的宽度
  265.             getWidth: function() {
  266.                 return $boy.width();
  267.             },
  268.             // 复位初始状态
  269.             resetOriginal: function() {
  270.                 this.stopWalk();
  271.                 // 恢复图片
  272.                 $boy.removeClass('slowWalk slowFlolerWalk').addClass('boyOriginal');
  273.             },
  274.             setFlolerWalk:function(){
  275.                  $boy.addClass('slowFlolerWalk');
  276.             }
  277.  
  278.         }
  279.     }
  1. /////////
  2. //页面滑动 //
  3. /////////
  4.  
  5.  
  6. /**
  7.  * [Swipe description]
  8.  * @param {[type]} container [页面容器节点]
  9.  * @param {[type]} options   [参数]
  10.  */
  11. function Swipe(container) {
  12.     // 获取第一个子节点
  13.     var element = container.find(":first");
  14.     var swipe = {};
  15.  
  16.     // li页面数量
  17.     var slides = element.find(">"); 
  18.  
  19.     // 获取容器尺寸
  20.     var width = container.width();
  21.     var height = container.height();
  22.  
  23.     // 设置li页面总宽度
  24.     element.css({
  25.         width: (slides.length * width) + 'px',
  26.         height: height + 'px'
  27.     });
  28.  
  29.     // 设置每一个页面li的宽度
  30.     $.each(slides, function(index) {
  31.         var slide = slides.eq(index); // 获取到每一个li元素    
  32.         slide.css({
  33.             width: width + 'px',
  34.             height: height + 'px'
  35.         });
  36.     });
  37.  
  38.     // 监控完成与移动
  39.     swipe.scrollTo = function(x, speed) {
  40.         // 执行动画移动
  41.         element.css({
  42.             'transition-timing-function' : 'linear',
  43.             'transition-duration'        : speed + 'ms',
  44.             'transform'                  : 'translate3d(-' + x + 'px,0px,0px)'
  45.         });
  46.         return this;
  47.     };
  48.  
  49.     return swipe;
  50. }
  1. * {
  2.        padding: 0;
  3.        margin: 0;
  4.    }
  5.  
  6.    ol,
  7.    ul,
  8.    li {
  9.        list-style-type: none;
  10.    }
  11.    /*主体部分*/
  12.  
  13.    #content {
  14.        width: 100%;
  15.        height: 100%;
  16.        /* top: 20%; */
  17.        overflow: hidden;
  18.        position: absolute;
  19.    }
  20.  
  21.    .content-wrap {
  22.        position: relative;
  23.    }
  24.  
  25.    .content-wrap > li {
  26.        background: #CAE1FF;
  27.        color: red;
  28.        float: left;
  29.        overflow: hidden;
  30.        position: relative;
  31.    }
  32.  
  33.    /*li:nth-child(2) {
  34.        background: #9BCD9B;
  35.    }a
  36.    
  37.    li:nth-child(3) {
  38.        background: yellow;
  39.    }
  40.    
  41.    a {
  42.        position: absolute;
  43.        top: 50%;
  44.        left: 40%;
  45.    }*/
  46.  
  47.    .charector {
  48.        position: absolute;
  49.        left: 0%;
  50.        top: 55%;
  51.        /* width: 100%;
  52.        height: 100%; */
  53.        width: 151px;
  54.        height: 291px;
  55.        background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
  56.    }
  57.    /*人物暂停*/
  58.  
  59.    .pauseWalk {
  60.        -webkit-animation-play-state: paused;
  61.        -moz-animation-play-state: paused;
  62.    }
  63.    .boyOriginal {
  64.      background-position: -150px -0px;
  65.     }
  66.  
  67.    .slowWalk {
  68.        -webkit-animation-name: person-slow;
  69.        -webkit-animation-duration: 950ms;
  70.        -webkit-animation-iteration-count: infinite;
  71.        -webkit-animation-timing-function: steps(1, start);
  72.        -moz-animation-name: person-slow;
  73.        -moz-animation-duration: 950ms;
  74.        -moz-animation-iteration-count: infinite;
  75.        -moz-animation-timing-function: steps(1, start)
  76.    }
  77.  
  78.    .slowFlolerWalk {
  79.        -webkit-animation-name: person-floler-slow;
  80.        -webkit-animation-duration: 950ms;
  81.        -webkit-animation-iteration-count: infinite;
  82.        -webkit-animation-timing-function: step-start;
  83.        -moz-animation-name: person-floler-slow;
  84.        -moz-animation-duration: 950ms;
  85.        -moz-animation-iteration-count: infinite;
  86.        -moz-animation-timing-function: step-start;
  87.    }
  88.    /*普通慢走*/
  89.  
  90.    @-webkit-keyframes person-slow {
  91.        0% {
  92.            background-position: -0px -291px;
  93.        }
  94.        25% {
  95.            background-position: -602px -0px;
  96.        }
  97.        50% {
  98.            background-position: -302px -291px;
  99.        }
  100.        75% {
  101.            background-position: -151px -291px;
  102.        }
  103.        100% {
  104.            background-position: -0px -291px;
  105.        }
  106.    }
  107.  
  108.    @-moz-keyframes person-slow {
  109.        0% {
  110.            background-position: -0px -291px;
  111.        }
  112.        25% {
  113.            background-position: -602px -0px;
  114.        }
  115.        50% {
  116.            background-position: -302px -291px;
  117.        }
  118.        75% {
  119.            background-position: -151px -291px;
  120.        }
  121.        100% {
  122.            background-position: -0px -291px;
  123.        }
  124.    }
  125.    /*带花*/
  126.  
  127.    @-webkit-keyframes person-floler-slow {
  128.        0% {
  129.            background-position: -453px -0px;
  130.        }
  131.        25% {
  132.            background-position: -904px -0px;
  133.        }
  134.        50% {
  135.            background-position: -451px -0px;
  136.        }
  137.        75% {
  138.            background-position: -753px -0px;
  139.        }
  140.        100% {
  141.            background-position: -300px -0px;
  142.        }
  143.    }
  144.  
  145.    @-moz-keyframes person-floler-slow {
  146.        0% {
  147.            background-position: -453px -0px;
  148.        }
  149.        25% {
  150.            background-position: -904px -0px;
  151.        }
  152.        50% {
  153.            background-position: -451px -0px;
  154.        }
  155.        75% {
  156.            background-position: -753px -0px;
  157.        }
  158.        100% {
  159.            background-position: -300px -0px;
  160.        }
  161.    }
  1. /*背景图*/
  2.  
  3. .a_background {
  4.     width: 100%;
  5.     height: 100%;
  6.     /*    background-image: url("../images/QixiA.png");
  7.     background-size: 100% 100%;*/
  8.  
  9.     position: absolute;
  10. }
  11.  
  12. .a_background_top {
  13.     width: 100%;
  14.     height: 71.6%;
  15.     background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png");
  16.     background-size: 100% 100%;
  17. }
  18.  
  19. .a_background_middle {
  20.     width: 100%;
  21.     height: 13.1%;
  22.     background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png");
  23.     background-size: 100% 100%;
  24. }
  25.  
  26. .a_background_botton {
  27.     width: 100%;
  28.     height: 15.3%;
  29.     background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
  30.     background-size: 100% 100%;
  31. }
  32.  
  33. button {
  34.     width: 80px;
  35.     height: 50px;
  36. }
  37.  
  38. .button {
  39.     position: absolute;
  40.     bottom: 0;
  41. }
  42. /*人物暂停*/
  43.  
  44. .pauseWalk {
  45.     animation-play-state: paused;
  46. }
  47. /*-------- 太阳自转以及动画 --------*/
  48.  
  49. #sun {
  50.     background: url("http://img1.sycdn.imooc.com//55ade004000106c202010201.png") no-repeat;
  51.     position: absolute;
  52.     z-index: 1;
  53.     top: -30px;
  54.     height: 201px;
  55.     width: 201px;
  56.     right: 40%;
  57. }
  58.  
  59. .rotation {
  60.     -webkit-animation-name: rotation;
  61.     -webkit-animation-duration: 30s;
  62.     -webkit-animation-iteration: 1;
  63.     -moz-animation-name: rotation;
  64.     -moz-animation-duration: 30s;
  65.     -moz-animation-iteration: 1;
  66. }
  67.  
  68. @-webkit-keyframes rotation {
  69.     0% {
  70.         transform: translateX(0) translateY(0);
  71.     }
  72.     100% {
  73.         transform: translateX(-2000px) translateY(400px);
  74.     }
  75. }
  76.  
  77. @-moz-keyframes rotation {
  78.     0% {
  79.         transform: translateX(0) translateY(0);
  80.     }
  81.     100% {
  82.         transform: translateX(-2000px) translateY(400px);
  83.     }
  84. }
  85. /*天空云*/
  86.  
  87. .cloud {
  88.     z-index: 2;
  89.     position: absolute;
  90. }
  91.  
  92. .cloud1 {
  93.     width: 20%;
  94.     height: 30%;
  95.     left: -5%;
  96.     top: 15%;
  97.     background: url("http://img1.sycdn.imooc.com//55addfde0001aec501810101.png") no-repeat;
  98.     -webkit-animation-name: smallCloud;
  99.     -webkit-animation-duration: 30s;
  100.     -webkit-animation-iteration: infinite;
  101.     -moz-animation-name: smallCloud;
  102.     -moz-animation-duration: 30s;
  103.     -moz-animation-iteration: infinite
  104. }
  105.  
  106. .cloud2 {
  107.     width: 20%;
  108.     height: 30%;
  109.     right: -5%;
  110.     background: url("http://img1.sycdn.imooc.com//55addff500016df503010140.png") no-repeat;
  111.     -webkit-animation-name: largeCloud;
  112.     -webkit-animation-duration: 60s;
  113.     -webkit-animation-iteration: infinite;
  114.     -moz-animation-name: largeCloud;
  115.     -moz-animation-duration: 60s;
  116.     -moz-animation-iteration: infinite;
  117. }
  118.  
  119. @-webkit-keyframes smallCloud {
  120.     0% {
  121.         left: -5%;
  122.     }
  123.     100% {
  124.         left: 100%;
  125.     }
  126. }
  127.  
  128. @-moz-keyframes smallCloud {
  129.     0% {
  130.         left: -5%;
  131.     }
  132.     100% {
  133.         left: 100%;
  134.     }
  135. }
  136.  
  137. @-webkit-keyframes largeCloud {
  138.     0% {
  139.         right: -5%;
  140.     }
  141.     100% {
  142.         right: 100%;
  143.     }
  144. }
  145.  
  146. @-moz-keyframes largeCloud {
  147.     0% {
  148.         right: -5%;
  149.     }
  150.     100% {
  151.         right: 100%;
  152.     }
  153. }
  1. /*背景图*/
  2.  
  3. .b_background {
  4.     width: 100%;
  5.     height: 100%;
  6.     background-image: url("http://img1.sycdn.imooc.com//55ade06f00015a0d14410901.png");
  7.     background-size: 100% 100%;
  8.     position: absolute;
  9. }
  10.  
  11. .b_background_preload {
  12.     background: url("http://img1.sycdn.imooc.com//55ade0be0001a37914410901.png") no-repeat -9999px -9999px;
  13. }
  14.  
  15. .lamp-bright {
  16.    background-image: url("http://img1.sycdn.imooc.com//55ade0be0001a37914410901.png");
  17. }
  18.  
  19.  
  20. /*商店*/
  21.  
  22. .shop {
  23.     width: 39.5%;
  24.     height: 35.5%;
  25.     position: absolute;
  26.     left: 29%;
  27.     top: 36.5%;
  28. }
  29.  
  30. .door {
  31.     position: absolute;
  32.     width: 32%;
  33.     height: 100%;
  34.     top: 32%;
  35.     height: 68%;
  36.     overflow: hidden;
  37.     left: 58.5%;
  38. }
  39.  
  40. .door-left,
  41. .door-right {
  42.     width: 50%;
  43.     height: 100%;
  44.     position: absolute;
  45. }
  46.  
  47. .door-left {
  48.     left: 0%;
  49.     background: url(http://img.mukewang.com/55ade1140001050d00910231.png);
  50.     background-size: 100% 100%;
  51. }
  52.  
  53. .door-right {
  54.     left: 50%;
  55.     background: url(http://img.mukewang.com/55ade12100019f5b00910231.png);
  56.     background-size: 100% 100%;
  57. }
  58.  
  59.  
  60. /*鸟*/
  61.  
  62. .bird {
  63.     min-width: 91px;
  64.     min-height: 71px;
  65.     top: 10%;
  66.     position: absolute;
  67.     z-index: 10;
  68.     right: -91px;
  69.     background: url(http://img.mukewang.com/55ade1700001b38302730071.png) -182px 0px no-repeat;
  70. }
  71. .birdFly {
  72.     -webkit-animation-name: bird-slow;
  73.     -webkit-animation-duration: 400ms;
  74.     -webkit-animation-timing-function: step-start;
  75.     -webkit-animation-iteration-count: infinite;
  76.     -moz-animation-name: bird-slow;
  77.     -moz-animation-duration: 400ms;
  78.     -moz-animation-timing-function: step-start;
  79.     -moz-animation-iteration-count: infinite;
  80. }
  81.  
  82.  
  83. /*鸟慢飞*/
  84. @-webkit-keyframes bird-slow {
  85.     0% {
  86.         background-position: -182px 0px;
  87.     }
  88.     50% {
  89.         background-position: 0px 0px;
  90.     }
  91.     75% {
  92.         background-position: -91px 0px;
  93.     }
  94.     100% {
  95.         background-position: -182px 0px;
  96.     }
  97. }
  98.  
  99. @-moz-keyframes bird-slow {
  100.     0% {
  101.         background-position: -182px 0px;
  102.     }
  103.     50% {
  104.         background-position: 0px 0px;
  105.     }
  106.     75% {
  107.         background-position: -91px 0px;
  108.     }
  109.     100% {
  110.         background-position: -182px 0px;
  111.     }
  112. }
  1. /*背景图*/
  2.  
  3. .c_background {
  4.     width: 100%;
  5.     height: 100%;
  6.     background-size: 100% 100%;
  7.     position: absolute;
  8. }
  9.  
  10. .c_background_top{
  11.     width: 100%;
  12.     height: 71.6%;
  13.     background-image: url("http://img1.sycdn.imooc.com//55ade19b0001d92c14410645.png");
  14.     background-size: 100% 100%;
  15. }
  16.  
  17.  
  18. .c_background_middle{
  19.     width: 100%;
  20.     height: 13.1%;
  21.     background-image: url("http://img1.sycdn.imooc.com//55ade1b3000135c114410118.png");
  22.     background-size: 100% 100%;
  23. }
  24.  
  25. .c_background_botton{
  26.     width: 100%;
  27.     height: 15.3%;
  28.     background-image: url("http://img1.sycdn.imooc.com//55ade1c30001db5d14410138.png");
  29.     background-size: 100% 100%;
  30. }
  31.  
  32. /*小女孩*/
  33.  
  34. .girl {
  35.     background: url(http://img.mukewang.com/55ade30d000100dc10570291.png) -755px -0px no-repeat;
  36.     position: absolute;
  37.     right: 40%;
  38.     top: 37%;
  39.     width: 151px;
  40.     height: 291px;
  41. }
  42.  
  43. /*桥*/
  44.  
  45. .bridge-bottom {
  46.     position: absolute;
  47.     width: 41%;
  48.     height: 24%;
  49.     left: 29.5%;
  50.     top: 76%;
  51.     overflow: hidden;
  52.     /*    -webkit-transform:perspective(8px) rotateX(.8deg); */
  53. }
  54. /*波浪水布局*/
  55.  
  56. .water {
  57.     width: 100%;
  58.     height: 100%;
  59. }
  60.  
  61. .water_1,
  62. .water_2,
  63. .water_3,
  64. .water_4 {
  65.     width: 100%;
  66.     position: absolute;
  67.     height: 50%;
  68.     -webkit-animation-name: shake;
  69.     -webkit-animation-duration: 40s;
  70.     -webkit-animation-direction: alternate;
  71.     -webkit-anination-timing-function: linear;
  72.     -webkit-animation-iteration-count: infinite;
  73.  
  74.     -moz-animation-name: shake;
  75.     -moz-animation-duration: 40s;
  76.     -moz-animation-direction: alternate;
  77.     -moz-anination-timing-function: linear;
  78.     -moz-animation-iteration-count: infinite;
  79. }
  80.  
  81. .water_1 {
  82.     width: 131px;
  83.     height: 15px;
  84.     top: 13%;
  85.     left: 35%;
  86.     background: url(http://img.mukewang.com/55ade1e000010f2908540027.png) -261px -0px no-repeat;
  87. }
  88.  
  89. .water_2 {
  90.     width: 161px;
  91.     height: 9px;
  92.     top: 30%;
  93.     left: 45%;
  94.     background: url(http://img.mukewang.com/55ade1e000010f2908540027.png) -693px -0px no-repeat;
  95.     -webkit-animation-delay: 2s;
  96.     -moz-animation-delay: 2s;
  97. }
  98.  
  99. .water_3 {
  100.     width: 261px;
  101.     height: 29px;
  102.     top: 50%;
  103.     left: 15%;
  104.     background: url(http://img.mukewang.com/55ade1e000010f2908540027.png) -0px -0px no-repeat;
  105.     -webkit-animation-delay: 1s;
  106.     -moz-animation-delay: 1s;
  107. }
  108.  
  109. .water_4 {
  110.     width: 301px;
  111.     height: 12px;
  112.     top: 75%;
  113.     left: 30%;
  114.     background: url(http://img.mukewang.com/55ade1e000010f2908540027.png) -392px -0px no-repeat;
  115.     -webkit-animation-delay: 3s;
  116.     -moz-animation-delay: 3s;
  117. }
  118.  
  119. @-webkit-keyframes shake {
  120.     0%, 100% {
  121.         -webkit-transform: translate3d(0, 0, 0);
  122.     }
  123.     10%,
  124.     30%,
  125.     50%,
  126.     70%,
  127.     90% {
  128.         -webkit-transform: translate3d(-30px, 0px, 0);
  129.     }
  130.     20%,
  131.     40%,
  132.     60%,
  133.     80% {
  134.         -webkit-transform: translate3d(30px, 0px, 0);
  135.     }
  136. }
  137.  
  138. @-moz-keyframes shake {
  139.     0%, 100% {
  140.         -moz-transform: translate3d(0, 0, 0);
  141.     }
  142.     10%,
  143.     30%,
  144.     50%,
  145.     70%,
  146.     90% {
  147.         -moz-transform: translate3d(-30px, 0px, 0);
  148.     }
  149.     20%,
  150.     40%,
  151.     60%,
  152.     80% {
  153.         -moz-transform: translate3d(30px, 0px, 0);
  154.     }
  155. }
  156. /*星星*/
  157.  
  158. .stars {
  159.     width: 100%;
  160.     height: 100%;
  161.     position: absolute;
  162. }
  163.  
  164. .stars > li {
  165.     position: absolute;
  166.     width: 30px;
  167.     height: 31px;
  168.     background-image: url("http://img1.sycdn.imooc.com//55ade1fe00016b8900300031.png");
  169.     -webkit-animation-name: flash;
  170.     -webkit-animation-timing-function: ease-in-out;
  171.     -webkit-animation-iteration-count: infinite;
  172.     -webkit-animation-direction: alternate;
  173.     -moz-animation-name: flash;
  174.     -moz-animation-timing-function: ease-in-out;
  175.     -moz-animation-iteration-count: infinite;
  176.     -moz-animation-direction: alternate;
  177. }
  178.  
  179. .stars1 {
  180.     top: 20%;
  181.     left: 30%;
  182.     -webkit-animation-duration: 5s;
  183.     -moz-animation-duration: 5s;
  184. }
  185.  
  186. .stars2 {
  187.     top: 15%;
  188.     left: 20%;
  189.     -webkit-animation-duration: 20s;
  190.     -moz-animation-duration: 20s;
  191. }
  192.  
  193. .stars3 {
  194.     top: 25%;
  195.     left: 85%;
  196.     -webkit-animation-duration: 15s;
  197.     -moz-animation-duration: 15s;
  198. }
  199.  
  200. .stars4 {
  201.     top: 30%;
  202.     left: 70%;
  203.     -webkit-animation-duration: 25s;
  204.     -moz-animation-duration: 25s;
  205. }
  206.  
  207. .stars5 {
  208.     top: 25%;
  209.     left: 20%;
  210.     -webkit-animation-duration: 30s;
  211.     -moz-animation-duration: 30s;
  212. }
  213.  
  214. .stars6 {
  215.     top: 10%;
  216.     left: 65%;
  217.     -webkit-animation-duration: 10s;
  218.     -moz-animation-duration: 10s;
  219. }
  220.  
  221. @-webkit-keyframes flash {
  222.     0%, 50%, 100% {
  223.         opacity: 1;
  224.     }
  225.     25%,
  226.     75% {
  227.         opacity: 0;
  228.     }
  229. }
  230.  
  231. @-moz-keyframes flash {
  232.     0%, 50%, 100% {
  233.         opacity: 1;
  234.     }
  235.     25%,
  236.     75% {
  237.         opacity: 0;
  238.     }
  239. }
下一节