7-5 飘花效果的实现
本节编程练习不计算学习进度，请电脑登录imooc.com操作

飘花效果的实现

飘花的效果稍微复杂一点，有一定量的JavaScript代码，通过JS+CSS3的组合实现的。观察右边效果，可以大致分解飘花的实现

这里采用的JS+CSS3的结合实现，CSS3实现旋转部分，首先从布局上来说，飘花是要比所有内部元素层级都要高，所以布局上是要与页面li平级才可以

实现原理：

通过定时器调用JS代码不断的动态创建雪花节点，随机选择一个图片作为其背景，赋予三个初始的样式属性top,left与opacity，通过transition动画过度的方式执行这3个属性的动画变化。整个原理其实也是很简单的，主要涉及了一些细节的问题：例如元素的创建、图片的随机、开始的left与opacity的随机处理、最终值的计算等等

执行的流程：

具体的实现可以参考右边的代码区域

任务

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></li>
  20.             <!-- 第二副画面 -->
  21.             <li></li>
  22.             <!-- 第三副画面 -->
  23.             <li>
  24.                 <!-- 背景图 -->
  25.                 <div class="c_background">
  26.                     <div class="c_background_top"></div>
  27.                     <div class="c_background_middle"></div>
  28.                     <div class="c_background_botton"></div>
  29.                 </div>
  30.                 <!-- 小女孩 -->
  31.                 <div class="girl"></div>
  32.                 <div class="bridge-bottom">
  33.                     <div class="water">
  34.                         <div id="water1" class="water_1"></div>
  35.                         <div id="water2" class="water_2"></div>
  36.                         <div id="water3" class="water_3"></div>
  37.                         <div id="water4" class="water_4"></div>
  38.                     </div>
  39.                 </div>
  40.                 <!-- 星星 -->
  41.                 <ul class="stars">
  42.                     <li class="stars1"></li>
  43.                     <li class="stars2"></li>
  44.                     <li class="stars3"></li>
  45.                     <li class="stars4"></li>
  46.                     <li class="stars5"></li>
  47.                     <li class="stars6"></li>
  48.                 </ul>
  49.                 <!-- 慕课网logo图 -->
  50.                 <div class="logo"></div>
  51.             </li>
  52.         </ul>
  53.         <!-- 飘花 -->
  54.         <div id="snowflake"></div>
  55.     </div>
  56.     <div class="button">
  57.         <button>开始飘花</button>
  58.     </div>
  59. </body>
  60. <script type="text/javascript">
  61. $(function() {
  62.  
  63.     var snowflakeURl = [
  64.         'http://img1.sycdn.imooc.com//55adde120001d34e00410041.png',
  65.         'http://img1.sycdn.imooc.com//55adde2a0001a91d00410041.png',
  66.         'http://img1.sycdn.imooc.com//55adde5500013b2500400041.png',
  67.         'http://img1.sycdn.imooc.com//55adde62000161c100410041.png',
  68.         'http://img1.sycdn.imooc.com//55adde7f0001433000410041.png',
  69.         'http://img1.sycdn.imooc.com//55addee7000117b500400041.png'
  70.     ]
  71.  
  72.     ///////
  73.     //飘雪花 //
  74.     ///////
  75.     function snowflake() {
  76.         // 雪花容器
  77.         var $flakeContainer = $('#snowflake');
  78.  
  79.         // 随机六张图
  80.         function getImagesName() {
  81.             return snowflakeURl[[Math.floor(Math.random() * 6)]];
  82.         }
  83.         // 创建一个雪花元素
  84.         function createSnowBox() {
  85.             var url = getImagesName();
  86.             return $('<div class="snowbox" />').css({
  87.                 'width': 41,
  88.                 'height': 41,
  89.                 'position': 'absolute',
  90.                 'backgroundSize': 'cover',
  91.                 'zIndex': 100000,
  92.                 'top': '-41px',
  93.                 'backgroundImage': 'url(' + url + ')'
  94.             }).addClass('snowRoll');
  95.         }
  96.         // 开始飘花
  97.         setInterval(function() {
  98.             // 运动的轨迹
  99.             var startPositionLeft = Math.random() * visualWidth - 100,
  100.                 startOpacity    = 1,
  101.                 endPositionTop  = visualHeight - 40,
  102.                 endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
  103.                 duration        = visualHeight * 10 + Math.random() * 5000;
  104.  
  105.             // 随机透明度，不小于0.5
  106.             var randomStart = Math.random();
  107.             randomStart = randomStart < 0.5 ? startOpacity : randomStart;
  108.  
  109.             // 创建一个雪花
  110.             var $flake = createSnowBox();
  111.  
  112.             // 设计起点位置
  113.             $flake.css({
  114.                 left: startPositionLeft,
  115.                 opacity : randomStart
  116.             });
  117.  
  118.             // 加入到容器
  119.             $flakeContainer.append($flake);
  120.  
  121.             // 开始执行动画
  122.             $flake.transition({
  123.                 top: endPositionTop,
  124.                 left: endPositionLeft,
  125.                 opacity: 0.7
  126.             }, duration, 'ease-out', function() {
  127.                 $(this).remove() //结束后删除
  128.             });
  129.  
  130.         }, 200);
  131.     }
  132.  
  133.  
  134.     //开始
  135.     $("button:first").click(function() {
  136.         snowflake()
  137.     })
  138.  
  139. })
  140. </script>
  141. <script type="text/javascript" src="Swipe.js"></script>
  142. <script type="text/javascript" src="Qixi.js"></script>
  143.  
  144. </html>
  1. // 动画结束事件
  2.        var animationEnd = (function() {
  3.            var explorer = navigator.userAgent;
  4.            if (~explorer.indexOf('WebKit')) {
  5.                return 'webkitAnimationEnd';
  6.            }
  7.            return 'animationend';
  8.        })();
  9.  
  10.  
  11.        ///////////
  12.        //灯动画 //
  13.        ///////////
  14.        var lamp = {
  15.            elem: $('.b_background'),
  16.            bright: function() {
  17.                this.elem.addClass('lamp-bright');
  18.            },
  19.            dark: function() {
  20.                this.elem.removeClass('lamp-bright');
  21.            }
  22.        };
  23.  
  24.        var container = $("#content");
  25.        var swipe = Swipe(container);
  26.        visualWidth = container.width();
  27.        visualHeight = container.height();
  28.  
  29.        // 页面滚动到指定的位置
  30.        function scrollTo(time, proportionX) {
  31.            var distX = visualWidth * proportionX;
  32.            swipe.scrollTo(distX, time);
  33.        }
  34.  
  35.        // 获取数据
  36.        var getValue = function(className) {
  37.            var $elem = $('' + className + '');
  38.                //走路的路线坐标
  39.            return {
  40.                height: $elem.height(),
  41.                top: $elem.position().top
  42.            };
  43.        };
  44.  
  45.        // 桥的Y轴
  46.        var bridgeY = function() {
  47.            var data = getValue('.c_background_middle');
  48.            return data.top;
  49.        }();
  50.  
  51.        ////////
  52.        //小女孩 //
  53.        ////////
  54.        var girl = {
  55.            elem: $('.girl'),
  56.            getHeight: function() {
  57.                return this.elem.height();
  58.            },
  59.            setOffset: function() {
  60.                this.elem.css({
  61.                    left: visualWidth / 2,
  62.                    top: bridgeY - this.getHeight()
  63.                });
  64.            }
  65.        };
  66.  
  67.        // 修正小女孩位置
  68.        girl.setOffset();
  69.  
  70.  
  71.        // 用来临时调整页面
  72.        swipe.scrollTo(visualWidth * 2, 0);
  73.  
  74.  
  75.        function doorAction(left, right, time) {
  76.            var $door = $('.door');
  77.            var doorLeft = $('.door-left');
  78.            var doorRight = $('.door-right');
  79.            var defer = $.Deferred();
  80.            var count = 2;
  81.            // 等待开门完成
  82.            var complete = function() {
  83.                if (count == 1) {
  84.                    defer.resolve();
  85.                    return;
  86.                }
  87.                count--;
  88.            }
  89.            doorLeft.transition({
  90.                'left': left
  91.            }, time, complete);
  92.            doorRight.transition({
  93.                'left': right
  94.            }, time, complete);
  95.            return defer;
  96.        }
  97.  
  98.        // 开门
  99.        function openDoor() {
  100.            return doorAction('-50%', '100%', 2000);
  101.        }
  102.  
  103.        // 关门
  104.        function shutDoor() {
  105.            return doorAction('0%', '50%', 2000);
  106.        }
  107.  
  108.        /**
  109.         * 小孩走路
  110.         * @param {[type]} container [description]
  111.         */
  112.        function BoyWalk() {
  113.  
  114.            var container = $("#content");
  115.            // 页面可视区域
  116.            var visualWidth = container.width();
  117.            var visualHeight = container.height();
  118.  
  119.            // 获取数据
  120.            var getValue = function(className) {
  121.                var $elem = $('' + className + '');
  122.                // 走路的路线坐标
  123.                return {
  124.                    height: $elem.height(),
  125.                    top: $elem.position().top
  126.                };
  127.            };
  128.            // 路的Y轴
  129.            var pathY = function() {
  130.                var data = getValue('.a_background_middle');
  131.                return data.top + data.height / 2;
  132.            }();
  133.  
  134.            var $boy = $("#boy");
  135.            var boyWidth = $boy.width();
  136.            var boyHeight = $boy.height();
  137.  
  138.            // 设置下高度    
  139.            $boy.css({
  140.                top: pathY - boyHeight + 25
  141.            });
  142.  
  143.            // 暂停走路
  144.            function pauseWalk() {
  145.                $boy.addClass('pauseWalk');
  146.            }
  147.  
  148.            // 恢复走路
  149.            function restoreWalk() {
  150.                $boy.removeClass('pauseWalk');
  151.            }
  152.  
  153.            // css3的动作变化
  154.            function slowWalk() {
  155.                $boy.addClass('slowWalk');
  156.            }
  157.  
  158.            // 用transition做运动
  159.            function stratRun(options, runTime) {
  160.                var dfdPlay = $.Deferred();
  161.                // 恢复走路
  162.                restoreWalk();
  163.                // 运动的属性
  164.                $boy.transition(
  165.                    options,
  166.                    runTime,
  167.                    'linear',
  168.                    function() {
  169.                        dfdPlay.resolve(); // 动画完成
  170.                    });
  171.                return dfdPlay;
  172.            }
  173.  
  174.            // 开始走路
  175.            function walkRun(time, dist, disY) {
  176.                time = time || 3000;
  177.                // 脚动作
  178.                slowWalk();
  179.                // 开始走路
  180.                var d1 = stratRun({
  181.                    'left': dist + 'px',
  182.                    'top': disY ? disY : undefined
  183.                }, time);
  184.                return d1;
  185.            }
  186.  
  187.            // 走进商店
  188.            function walkToShop(runTime) {
  189.                var defer = $.Deferred();
  190.                var doorObj = $('.door');
  191.                // 门的坐标
  192.                var offsetDoor = doorObj.offset();
  193.                var doorOffsetLeft = offsetDoor.left;
  194.                var doorOffsetTop = offsetDoor.top;
  195.                // 小孩当前的坐标
  196.                var posBoy = $boy.position();
  197.                var boyPoxLeft = posBoy.left;
  198.                var boyPoxTop = posBoy.top;
  199.  
  200.                // 中间位置
  201.                var boyMiddle = $boy.width() / 2;
  202.                var doorMiddle = doorObj.width() / 2;
  203.                var doorTopMiddle = doorObj.height() / 2;
  204.  
  205.  
  206.                // 当前需要移动的坐标
  207.                instanceX = (doorOffsetLeft + doorMiddle) - (boyPoxLeft + boyMiddle);
  208.  
  209.                // Y的坐标
  210.                // top = 人物底部的top - 门中见的top值
  211.                instanceY = boyPoxTop + boyHeight - doorOffsetTop + (doorTopMiddle);
  212.  
  213.                // 开始走路
  214.                var walkPlay = stratRun({
  215.                    transform: 'translateX(' + instanceX + 'px),translateY(-' + instanceY + 'px),scale(0.5,0.5)',
  216.                    opacity: 0.1
  217.                }, 2000);
  218.                // 走路完毕
  219.                walkPlay.done(function() {
  220.                    $boy.css({
  221.                        opacity: 0
  222.                    });
  223.                    defer.resolve();
  224.                });
  225.                return defer;
  226.            }
  227.  
  228.            // 走出店
  229.            function walkOutShop(runTime) {
  230.                var defer = $.Deferred();
  231.                restoreWalk();
  232.                // 开始走路
  233.                var walkPlay = stratRun({
  234.                    transform: 'translateX(' + instanceX + 'px),translateY(0),scale(1,1)',
  235.                    opacity: 1
  236.                }, runTime);
  237.                // 走路完毕
  238.                walkPlay.done(function() {
  239.                    defer.resolve();
  240.                });
  241.                return defer;
  242.            }
  243.  
  244.  
  245.            // 计算移动距离
  246.            function calculateDist(direction, proportion) {
  247.                return (direction == "x" ?
  248.                    visualWidth : visualHeight) * proportion;
  249.            }
  250.  
  251.            return {
  252.                // 开始走路
  253.                walkTo: function(time, proportionX, proportionY) {
  254.                    var distX = calculateDist('x', proportionX);
  255.                    var distY = calculateDist('y', proportionY);
  256.                    return walkRun(time, distX, distY);
  257.                },
  258.                // 走进商店
  259.                toShop: function() {
  260.                    return walkToShop.apply(null, arguments);
  261.                },
  262.                // 走出商店
  263.                outShop: function() {
  264.                    return walkOutShop.apply(null, arguments);
  265.                }, 
  266.                // 停止走路
  267.                stopWalk: function() {
  268.                    pauseWalk();
  269.                },
  270.                setColoer: function(value) {
  271.                    $boy.css('background-color', value)
  272.                },
  273.                // 获取男孩的宽度
  274.                getWidth: function() {
  275.                    return $boy.width();
  276.                },
  277.                // 复位初始状态
  278.                resetOriginal: function() {
  279.                    this.stopWalk();
  280.                    // 恢复图片
  281.                    $boy.removeClass('slowWalk slowFlolerWalk').addClass('boyOriginal');
  282.                },
  283.                // 转身动作
  284.                rotate: function(callback) {
  285.                    restoreWalk();
  286.                    $boy.addClass('boy-rotate');
  287.                    // 监听转身完毕
  288.                    if (callback) {
  289.                        $boy.on(animationEnd, function() {
  290.                            callback();
  291.                            $(this).off();
  292.                        });
  293.                    }
  294.                },
  295.                // 取花
  296.                talkFlower: function() {
  297.                    $boy.addClass('slowFlolerWalk');
  298.                }
  299.            }
  300.        }
  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.        float: left;
  27.        overflow: hidden;
  28.        position: relative;
  29.    }
  30.  
  31.    a {
  32.        position: absolute;
  33.        top: 50%;
  34.        left: 40%;
  35.    }
  36.  
  37.    .charector {
  38.        position: absolute;
  39.        left: 0%;
  40.        top: 55%;
  41.        position: absolute;
  42.        width: 100%;
  43.        height: 100%;
  44.        width: 151px;
  45.        height: 291px;
  46.        background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
  47.    }
  48.    /*人物暂停*/
  49.  
  50.    .pauseWalk {
  51.        -webkit-animation-play-state: paused;
  52.    }
  53.  
  54.    .slowWalk {
  55.        -webkit-animation-name: person-slow;
  56.        -webkit-animation-duration: 950ms;
  57.        -webkit-animation-iteration-count: infinite;
  58.        -webkit-animation-timing-function: steps(1, start);
  59.        -moz-animation-name: person-slow;
  60.        -moz-animation-duration: 950ms;
  61.        -moz-animation-iteration-count: infinite;
  62.        -moz-animation-timing-function: steps(1, start)
  63.    }
  64.  
  65.    .slowFlolerWalk {
  66.        -webkit-animation-name: person-floler-slow;
  67.        -webkit-animation-duration: 950ms;
  68.        -webkit-animation-iteration-count: infinite;
  69.        -webkit-animation-timing-function: step-start;
  70.        -moz-animation-name: person-floler-slow;
  71.        -moz-animation-duration: 950ms;
  72.        -moz-animation-iteration-count: infinite;
  73.        -moz-animation-timing-function: step-start;
  74.    }
  75.    /*人物暂停*/
  76.  
  77.    .boyOriginal {
  78.        background-position: -150px -0px;
  79.    }
  80.    /*带花*/
  81.  
  82.    @-webkit-keyframes person-floler-slow {
  83.        0% {
  84.            background-position: -453px -0px;
  85.        }
  86.        25% {
  87.            background-position: -904px -0px;
  88.        }
  89.        50% {
  90.            background-position: -451px -0px;
  91.        }
  92.        75% {
  93.            background-position: -753px -0px;
  94.        }
  95.        100% {
  96.            background-position: -300px -0px;
  97.        }
  98.    }
  99.  
  100.    @-moz-keyframes person-floler-slow {
  101.        0% {
  102.            background-position: -453px -0px;
  103.        }
  104.        25% {
  105.            background-position: -904px -0px;
  106.        }
  107.        50% {
  108.            background-position: -451px -0px;
  109.        }
  110.        75% {
  111.            background-position: -753px -0px;
  112.        }
  113.        100% {
  114.            background-position: -300px -0px;
  115.        }
  116.    }
  117.    /*普通慢走*/
  118.  
  119.    @-webkit-keyframes person-slow {
  120.        0% {
  121.            background-position: -0px -291px;
  122.        }
  123.        25% {
  124.            background-position: -602px -0px;
  125.        }
  126.        50% {
  127.            background-position: -302px -291px;
  128.        }
  129.        75% {
  130.            background-position: -151px -291px;
  131.        }
  132.        100% {
  133.            background-position: -0px -291px;
  134.        }
  135.    }
  136.  
  137.    @-moz-keyframes person-slow {
  138.        0% {
  139.            background-position: -0px -291px;
  140.        }
  141.        25% {
  142.            background-position: -602px -0px;
  143.        }
  144.        50% {
  145.            background-position: -302px -291px;
  146.        }
  147.        75% {
  148.            background-position: -151px -291px;
  149.        }
  150.        100% {
  151.            background-position: -0px -291px;
  152.        }
  153.    }
  154.    /*男孩转身*/
  155.  
  156.    .boy-rotate {
  157.        -webkit-animation-name: boy-rotate;
  158.        -webkit-animation-duration: 850ms;
  159.        -webkit-animation-iteration-count: 1;
  160.        -webkit-animation-timing-function: step-start;
  161.        -webkit-animation-fill-mode: forwards;
  162.        -moz-animation-name: boy-rotate;
  163.        -moz-animation-duration: 850ms;
  164.        -moz-animation-iteration-count: 1;
  165.        -moz-animation-timing-function: step-start;
  166.        -moz-animation-fill-mode: forwards;
  167.    }
  168.  
  169.    @-webkit-keyframes boy-rotate {
  170.        0% {
  171.            background-position: -603px -291px;
  172.        }
  173.        16.7% {
  174.            background-position: -150px -0px;
  175.        }
  176.        33.4% {
  177.            background-position: -453px -291px;
  178.        }
  179.        50.1% {
  180.            background-position: -0px -0px;
  181.        }
  182.        66.8% {
  183.            background-position: -903px -291px;
  184.        }
  185.        83.5% {
  186.            background-position: -753px -291px;
  187.        }
  188.        100% {
  189.            background-position: -603px -291px;
  190.        }
  191.    }
  192.  
  193.    @-moz-keyframes boy-rotate {
  194.        0% {
  195.            /*background-position: -603px -291px;*/
  196.        }
  197.        16.7% {
  198.            background-position: -150px -0px;
  199.        }
  200.        33.4% {
  201.            background-position: -453px -291px;
  202.        }
  203.        50.1% {
  204.            background-position: -0px -0px;
  205.        }
  206.        66.8% {
  207.            background-position: -903px -291px;
  208.        }
  209.        83.5% {
  210.            background-position: -753px -291px;
  211.        }
  212.        100% {
  213.            background-position: -603px -291px;
  214.        }
  215.    }
  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. .c_background_middle {
  18.     width: 100%;
  19.     height: 13.1%;
  20.     background-image: url("http://img1.sycdn.imooc.com//55ade1b3000135c114410118.png");
  21.     background-size: 100% 100%;
  22. }
  23.  
  24. .c_background_botton {
  25.     width: 100%;
  26.     height: 15.3%;
  27.     background-image: url("http://img1.sycdn.imooc.com//55ade1c30001db5d14410138.png");
  28.     background-size: 100% 100%;
  29. }
  30. /*天空
  31.  
  32.  
  33. /*雪花*/
  34.  
  35. #snowflake {
  36.     width: 100%;
  37.     height: 100%;
  38.     position: absolute;
  39.     top: 0;
  40.     left: 0;
  41.     overflow: hidden;
  42. }
  43.  
  44. .snowRoll {
  45.     position: absolute;
  46.     opacity: 0;
  47.     -webkit-animation-name: mysnow;
  48.     -webkit-animation-duration: 20s;
  49.     -moz-animation-name: mysnow;
  50.     -moz-animation-duration: 20s;
  51.     height: 80px;
  52. }
  53.  
  54. @-webkit-keyframes mysnow {
  55.     0% {
  56.         bottom: 100%;
  57.     }
  58.     50% {
  59.         -webkit-transform: rotate(1080deg);
  60.     }
  61.     100% {
  62.         -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
  63.     }
  64. }
  65.  
  66. @-moz-keyframes mysnow {
  67.     0% {
  68.         bottom: 100%;
  69.     }
  70.     50% {
  71.         -moz-transform: rotate(1080deg);
  72.     }
  73.     100% {
  74.         -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
  75.     }
  76. }
  77. /*小女孩*/
  78.  
  79. .girl {
  80.     background: url(http://img.mukewang.com/55ade30d000100dc10570291.png) -755px -0px no-repeat;
  81.     position: absolute;
  82.     right: 40%;
  83.     top: 37%;
  84.     width: 151px;
  85.     height: 291px;
  86. }
  87.  
  88. .girl-rotate {
  89.     -webkit-animation-name: girl-rotate;
  90.     -webkit-animation-duration: 850ms;
  91.     -webkit-animation-iteration-count: 1;
  92.     -webkit-animation-timing-function: step-start;
  93.     -webkit-animation-fill-mode: forwards;
  94.     -moz-animation-name: girl-rotate;
  95.     -moz-animation-duration: 850ms;
  96.     -moz-animation-iteration-count: 1;
  97.     -moz-animation-timing-function: step-start;
  98.     -moz-animation-fill-mode: forwards;
  99. }
  100.  
  101. @-webkit-keyframes girl-rotate {
  102.     0% {
  103.         background-position: -604px -0px;
  104.     }
  105.     16.7% {
  106.         background-position: -151px -0px;
  107.     }
  108.     33.4% {
  109.         background-position: -906px -0px;
  110.     }
  111.     50.1% {
  112.         background-position: -0px -0px;
  113.     }
  114.     66.8% {
  115.         background-position: -302px -0px;
  116.     }
  117.     83.5% {
  118.         background-position: -453px -0px;
  119.     }
  120.     100% {
  121.         background-position: -604px -0px;
  122.     }
  123. }
  124.  
  125. @-moz-keyframes girl-rotate {
  126.     0% {
  127.         /*background-position: -604px -0px;*/
  128.     }
  129.     16.7% {
  130.         background-position: -151px -0px;
  131.     }
  132.     33.4% {
  133.         background-position: -906px -0px;
  134.     }
  135.     50.1% {
  136.         background-position: -0px -0px;
  137.     }
  138.     66.8% {
  139.         background-position: -302px -0px;
  140.     }
  141.     83.5% {
  142.         background-position: -453px -0px;
  143.     }
  144.     100% {
  145.         background-position: -604px -0px;
  146.     }
  147. }
  148. /*桥*/
  149.  
  150. .bridge-bottom {
  151.     position: absolute;
  152.     width: 41%;
  153.     height: 24%;
  154.     left: 29.5%;
  155.     top: 76%;
  156.     overflow: hidden;
  157.     /*    -webkit-transform:perspective(8px) rotateX(.8deg); */
  158. }
  159. /*波浪水布局*/
  160.  
  161. .water {
  162.     width: 100%;
  163.     height: 100%;
  164. }
  165.  
  166. .water_1,
  167. .water_2,
  168. .water_3,
  169. .water_4 {
  170.     width: 100%;
  171.     position: absolute;
  172.     height: 50%;
  173.     -webkit-animation-name: shake;
  174.     -webkit-animation-duration: 40s;
  175.     -webkit-animation-direction: alternate;
  176.     -webkit-anination-timing-function: linear;
  177.     -webkit-animation-iteration-count: infinite;
  178.     -moz-animation-name: shake;
  179.     -moz-animation-duration: 40s;
  180.     -moz-animation-direction: alternate;
  181.     -moz-anination-timing-function: linear;
  182.     -moz-animation-iteration-count: infinite;
  183. }
  184.  
  185. .water_1 {
  186.     width: 131px;
  187.     height: 15px;
  188.     top: 13%;
  189.     left: 35%;
  190.     background: url(http://img.mukewang.com/55ade1e000010f2908540027.png) -261px -0px no-repeat;
  191. }
  192.  
  193. .water_2 {
  194.     width: 161px;
  195.     height: 9px;
  196.     top: 25%;
  197.     left: 45%;
  198.     background: url(http://img.mukewang.com/55ade1e000010f2908540027.png) -693px -0px no-repeat;
  199.     -webkit-animation-delay: 2s;
  200.     -moz-animation-delay: 2s;
  201. }
  202.  
  203. .water_3 {
  204.     width: 261px;
  205.     height: 29px;
  206.     top: 50%;
  207.     left: 15%;
  208.     background: url(http://img.mukewang.com/55ade1e000010f2908540027.png) -0px -0px no-repeat;
  209.     -webkit-animation-delay: 1s;
  210.     -moz-animation-delay: 1s;
  211. }
  212.  
  213. .water_4 {
  214.     width: 301px;
  215.     height: 12px;
  216.     top: 70%;
  217.     left: 30%;
  218.     background: url(http://img.mukewang.com/55ade1e000010f2908540027.png) -392px -0px no-repeat;
  219.     -webkit-animation-delay: 3s;
  220.     -moz-animation-delay: 3s;
  221. }
  222.  
  223. @-webkit-keyframes shake {
  224.     0%, 100% {
  225.         -webkit-transform: translate3d(0, 0, 0);
  226.     }
  227.     10%,
  228.     30%,
  229.     50%,
  230.     70%,
  231.     90% {
  232.         -webkit-transform: translate3d(-30px, 0px, 0);
  233.     }
  234.     20%,
  235.     40%,
  236.     60%,
  237.     80% {
  238.         -webkit-transform: translate3d(30px, 0px, 0);
  239.     }
  240. }
  241.  
  242. @-moz-keyframes shake {
  243.     0%, 100% {
  244.         -moz-transform: translate3d(0, 0, 0);
  245.     }
  246.     10%,
  247.     30%,
  248.     50%,
  249.     70%,
  250.     90% {
  251.         -moz-transform: translate3d(-30px, 0px, 0);
  252.     }
  253.     20%,
  254.     40%,
  255.     60%,
  256.     80% {
  257.         -moz-transform: translate3d(30px, 0px, 0);
  258.     }
  259. }
  260.  
  261. /*星星*/
  262.  
  263. .stars {
  264.     width: 100%;
  265.     height: 100%;
  266.     position: absolute;
  267. }
  268.  
  269. .stars > li {
  270.     position: absolute;
  271.     width: 30px;
  272.     height: 31px;
  273.     background-image: url("http://img1.sycdn.imooc.com//55ade1fe00016b8900300031.png");
  274.     -webkit-animation-name: flash;
  275.     -webkit-animation-timing-function: ease-in-out;
  276.     -webkit-animation-iteration-count: infinite;
  277.     -webkit-animation-direction: alternate;
  278.     -moz-animation-name: flash;
  279.     -moz-animation-timing-function: ease-in-out;
  280.     -moz-animation-iteration-count: infinite;
  281.     -moz-animation-direction: alternate;
  282. }
  283.  
  284. .stars1 {
  285.     top: 20%;
  286.     left: 30%;
  287.     -webkit-animation-duration: 5s;
  288.     -moz-animation-duration: 5s;
  289. }
  290.  
  291. .stars2 {
  292.     top: 15%;
  293.     left: 20%;
  294.     -webkit-animation-duration: 20s;
  295.     -moz-animation-duration: 20s;
  296. }
  297.  
  298. .stars3 {
  299.     top: 25%;
  300.     left: 85%;
  301.     -webkit-animation-duration: 15s;
  302.     -moz-animation-duration: 15s;
  303. }
  304.  
  305. .stars4 {
  306.     top: 30%;
  307.     left: 70%;
  308.     -webkit-animation-duration: 25s;
  309.     -moz-animation-duration: 25s;
  310. }
  311.  
  312. .stars5 {
  313.     top: 25%;
  314.     left: 20%;
  315.     -webkit-animation-duration: 30s;
  316.     -moz-animation-duration: 30s;
  317. }
  318.  
  319. .stars6 {
  320.     top: 10%;
  321.     left: 65%;
  322.     -webkit-animation-duration: 10s;
  323.     -moz-animation-duration: 10s;
  324. }
  325.  
  326. @-webkit-keyframes flash {
  327.     0%, 50%, 100% {
  328.         opacity: 1;
  329.     }
  330.     25%,
  331.     75% {
  332.         opacity: 0;
  333.     }
  334. }
  335.  
  336. @-moz-keyframes flash {
  337.     0%, 50%, 100% {
  338.         opacity: 1;
  339.     }
  340.     25%,
  341.     75% {
  342.         opacity: 0;
  343.     }
  344. }
  345.  
  346. /*文字效果*/
  347.  
  348. .logo {
  349.     width: 185px;
  350.     height: 81px;
  351.     background-image: url(http://img.mukewang.com/55ade2110001708401850081.png);
  352.     z-index: 999999;
  353.     position: absolute;
  354.     left: 50%;
  355.     margin-left: -92.5px;
  356.     top: 30px;
  357.     display: none;
  358. }
  359.  
  360. .logolightSpeedIn {
  361.     display: block;
  362.     -webkit-animation-name: lightSpeedIn;
  363.     -webkit-animation-timing-function: ease-out;
  364.     -webkit-animation-duration: 1s;
  365.     -moz-animation-name: lightSpeedIn;
  366.     -moz-animation-timing-function: ease-out;
  367.     -moz-animation-duration: 1s;
  368. }
  369.  
  370. @-webkit-keyframes lightSpeedIn {
  371.     0% {
  372.         -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
  373.         opacity: 0;
  374.     }
  375.     60% {
  376.         -webkit-transform: skewX(20deg);
  377.         opacity: 1;
  378.     }
  379.     80% {
  380.         -webkit-transform: skewX(-5deg);
  381.         opacity: 1;
  382.     }
  383.     100% {
  384.         -webkit-transform: none;
  385.         opacity: 1;
  386.     }
  387. }
  388.  
  389. @-moz-keyframes lightSpeedIn {
  390.     0% {
  391.         -moz-transform: translate3d(100%, 0, 0) skewX(-30deg);
  392.         opacity: 0;
  393.     }
  394.     60% {
  395.         -moz-transform: skewX(20deg);
  396.         opacity: 1;
  397.     }
  398.     80% {
  399.         -moz-transform: skewX(-5deg);
  400.         opacity: 1;
  401.     }
  402.     100% {
  403.         -moz-transform: none;
  404.         opacity: 1;
  405.     }
  406. }
  407.  
  408. .logoshake {
  409.     -webkit-animation-name: logoshake;
  410.     -webkit-animation-duration: 0.5s;
  411.     -moz-animation-name: logoshake;
  412.     -moz-animation-duration: 0.5s;
  413. }
  414.  
  415. @-webkit-keyframes logoshake {
  416.     0%, 100% {
  417.         -webkit-transform: translate3d(0, 0, 0);
  418.     }
  419.     10%,
  420.     30%,
  421.     50%,
  422.     70%,
  423.     90% {
  424.         -webkit-transform: translate3d(-5px, 0, 0);
  425.     }
  426.     20%,
  427.     40%,
  428.     60%,
  429.     80% {
  430.         -webkit-transform: translate3d(10px, 0, 0);
  431.     }
  432. }
  433.  
  434. @-moz-keyframes logoshake {
  435.     0%, 100% {
  436.         -moz-transform: translate3d(0, 0, 0);
  437.     }
  438.     10%,
  439.     30%,
  440.     50%,
  441.     70%,
  442.     90% {
  443.         -moz-transform: translate3d(-5px, 0, 0);
  444.     }
  445.     20%,
  446.     40%,
  447.     60%,
  448.     80% {
  449.         -moz-transform: translate3d(10px, 0, 0);
  450.     }
  451. }
下一节