charset "utf-8"; *{ margin: 0; padding: 0; -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ -ms-user-select: none; -moz-user-select: none; } body{ background: url(../img/bg.png) 0px top no-repeat; background-position-x: 0px; overflow: hidden; font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "????", Arial, sans-serif; height: 1000px; transition:1s; background-color:#80b7b4; } .shouji{position:absolute; left:0%; top:0%; width:310%; height:100%;} .shouji .img{width:100%; height:100%;} #main{ position: fixed; top: 60%; left: 0; height: 40%; width: 100%; overflow: visible; } .point{ position:absolute; font-size: 24px; color: #ffffff; font-weight: bold; background-color: rgba(0,0,0,0.3); top:10%; height:40px; line-height:40px; text-align: center; width:100%; border-radius: 10px; } .tips{ top:25%; position:absolute; width:100%; font-size: 14px; text-align: center; color: #000000; font-weight: bold; } #main .wall{ position: absolute; top: 30%; height: 70%; width: 20%; background-color: #000000; } #main .stick{ position:absolute; bottom: 68%; left: 20%; height: 2%; width: 0; background-color: #000000; transform: rotate(-90deg); } .stickMan{ width: 100%; position: absolute; bottom: 66.5%; left: 15.5%; } .stickMan img{ transform:scale(1); } .gameOver{ position: fixed; top: 0; left: 0; width: 100%; height:100%; background-color: rgba(0,0,0,0.3); text-align: center; display: none; } .gameOver h2{ margin: 15% 0 5% 0; font-size: 50px; color: #ffffff; font-weight: normal; } .gameOver .showPoint{ width: 70%; background-color: #ffffff; padding: 2%; margin: 0 auto; border-radius: 10px; color: #000000; font-weight: bold; } .gameOver .showPoint .newPoint,.bestPoint{ font-size: 30px; } .gameOver .btn{ width: 30%; margin: 5% auto; padding: 3% 0; background-color: orange; color: #FFFFFF; font-weight: bold; border-radius: 5px; } #mask{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background-color: rgba(0,0,0,0.5); } #mask img{ position: absolute; top: 0; right: 20px; }