【index.heml】

    <!-- 第一模块：开始游戏 -->
    <div class="login">
        <!-- <div class="play">
        <div class="cloud1"></div>
        <div class="cloud2"></div>
        <div class="mountain"></div>
        <div class="flog1"></div>
        <div class="flog2"></div>
        <div class="middle"></div>
        <div class="front"></div>
        <div class="leaves"></div>
        <div class="login">
        </div>
    </div>
    <div class="front"></div> -->


【index.less】


// .play {
//   position: relative;
//   width: 100%;
//   height: image-height("../img/Map/MapleIsland/底背景.png");
//   background: url(../img/Map/MapleIsland/底背景.png) no-repeat top center;
// }

// .play img,
// .play div {
//   // width: 1903px;
//   width: 100%;
//   position: absolute;
// }

// .play .leaves {
//   width: 929px;
//   height: 224px;
//   top: 620px;
//   left: 30px;
//   background: url(../img/Map/MapleIsland/落叶.png) no-repeat;
//   animation: fall 1.5s steps(14) infinite;
// }

// @keyframes fall {
//   0% {
//     background-position: 0 0;
//   }
//   100% {
//     background-position: 0 -3136px;
//   }
// }

// .play .front {
//   height: image-height("../img/Map/MapleIsland/前景.png");
//   background: url(../img/Map/MapleIsland/前景.png) no-repeat top center;
// }

// .play .middle {
//   top: 600px;
//   height: image-height("../img/Map/MapleIsland/中间.png");
//   background: url(../img/Map/MapleIsland/中间.png) no-repeat top center;
// }

// @keyframes flog-move {
//   0% {
//     left: 0;
//   }
//   100% {
//     left: -1903px;
//   }
// }

// .play [class^="flog"] {
//   top: 580px;
//   height: image-height("../img/Map/MapleIsland/山间云雾.png");
//   background: url(../img/Map/MapleIsland/山间云雾.png) top right;
//   width: 100%;
//   overflow: hidden;
//   animation: flog-move 120s linear infinite;
// }

// // 左边的雾移动，右边的雾变化宽度

// @keyframes flog-show {
//   0% {
//     width: 0;
//   }
//   100% {
//     width: 1903px;
//   }
// }

// .play .flog2 {
//   right: 0;
//   background-position: left;
//   animation: flog-show 120s linear infinite;
// }

// .play .mountain {
//   top: 520px;
//   height: image-height("../img/Map/MapleIsland/山.png");
//   background: url(../img/Map/MapleIsland/山.png) no-repeat top center;
// }

// @keyframes cloud-move {
//   0% {
//     left: 0;
//   }
//   100% {
//     left: -1903px;
//   }
// }

// .play [class^="cloud"] {
//   top: 420px;
//   height: image-height("../img/Map/MapleIsland/云.png");
//   background: url(../img/Map/MapleIsland/云.png) top right;
//   width: 100%;
//   animation: cloud-move 180s linear infinite;
// }

// // 左边的云移动，右边的云变化宽度

// @keyframes cloud-show {
//   0% {
//     width: 0;
//   }
//   100% {
//     width: 1903px;
//   }
// }

// .play .cloud2 {
//   right: 0;
//   background-position: left;
//   animation: cloud-show 180s linear infinite;
// }


【index.js】
// 窗体最大1920px，1920的时候叶子left是30px
// window.addEventListener('load', function() {
//     let value = window.innerWidth;
//     let leaves = document.querySelector('.leaves');
//     leaves.style.left = 30 - (window.screen.width - value) / 2 + "px";
// })

// window.addEventListener('resize', function() {
//     let value = window.innerWidth;
//     let leaves = document.querySelector('.leaves');
//     leaves.style.left = 30 - (window.screen.width - value) / 2 + "px";
// })