style.css

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    font: 14px Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}

body {
    position: fixed;
}

.main canvas {
    position: absolute;
    top: 0;
    left: 0;
}

body, .main, .init-frame, .switch-frame, .main .canvases {
    width: 100%;
    height: 100%;
}

.init-frame {
    z-index: 1;
    position: fixed;
    background:url(./resources/images/img_bg_logo.jpg) no-repeat;
    background-size:100% 100%;
}

.switch-frame {
    z-index: 1;
    position: fixed;
    background: rgb(1, 10, 37);
}

.init-frame h1, .init-frame .notice {
    color: white;
    text-align: center;
    position: relative;
    top: 35%;
    left: 0;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 3px 2px 3px rgb(59, 120, 190);
}

.init-frame .notice {
    color: rgb(59, 120, 190);
    font-weight: normal;
    font-size: 1rem;
    top: 45%;
    text-shadow: 2px 2px 2px #fff;
}

.init-frame .confirm {
    position: relative;
    top: 55%;
    left: 0;
    width: 100%;
    height: 50px;
}

.init-frame .confirm .confirm-btn {
    display: none;
    width: 100px;
    height: 45px;
    /* border-radius: 6px; */
    border: 0;
    margin: 0 auto;
    color: white;
    font-weight: bold;
    background: rgb(91, 152, 221);
    box-shadow:0 0 20px rgb(193, 216, 238);
}

#loadBtn {
    display: block;
}

.init-frame .loader {
    display: none;
    width: 100%;
    height: 30px;
    margin-top: 10px;
}

.init-frame .loader .content {
    margin: 0 auto;
    width: 80%;
    height: 100%;
    border-radius: 6px;
    box-shadow: 0 0 16px rgb(122, 185, 243);
}

.init-frame .loader .content .fill {
    width: 0;
    height: 100%;
    border-radius: 6px;
    background: rgb(72, 154, 231);
    box-shadow: 0 0 16px rgb(255, 255, 255);
    color: white;
    line-height: 30px;
    text-align: center;
}

.switch-frame {
    overflow-y: auto;
}

.switch-frame .confirm {
    padding: 2rem;
    width: 100%;
}
.switch-frame .confirm .fight {
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -40px;
    width: 80px;
    height: 40px;
    border: 0;
    color: white;
    font-weight: bold;
    background: rgb(41, 93, 151);
    border-radius: 6px;
    box-shadow:0 0 20px rgb(121, 195, 255);
}

.switch-frame h2 {
    font-size: 2rem;
    color: white;
    font-weight: bold;
    text-shadow: 3px 2px 3px rgb(59, 120, 190);
    text-align: center;
    padding-top: 2rem;
}

.x-nowrap {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.switch-frame .switch-map {
    padding: 2rem 0 2rem 0;
}
.switch-frame .switch-map .map-btn {
    border-radius: 100%;
    border: 0;
    width: 100px;
    height: 100px;
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 1.5rem;
}

.switch-frame .switch-map .map-btn.map-btn-cloud {
    width: 120px;
    height: 120px;
    color: white;
    text-shadow: 3px 2px 3px rgb(53, 119, 241);
    /* background-size:100% 100%; */
    background:url(./resources/images/img_bg_level_2.jpg) no-repeat;
    background-position: -135px -240px;
    box-shadow: 0 0 16px rgb(109, 177, 255);
}
.map-btn-desert {
    color: rgb(255, 224, 189);
    text-shadow: 3px 2px 3px rgb(221, 143, 54);
    background:url(./resources/images/img_bg_level_3.jpg) no-repeat;
    background-position: -255px -220px;
    box-shadow: 0 0 16px rgb(255, 224, 189);
}
.map-btn-ruins {
    color: rgb(85, 106, 177);
    text-shadow: 3px 2px 3px rgb(19, 36, 94);
    background:url(./resources/images/img_bg_level_4.jpg) no-repeat;
    background-position: -315px -265px;
    box-shadow: 0 0 16px rgb(85, 106, 177);
}

.map-btn-volcano {
    color: rgb(255, 140, 111);
    text-shadow: 3px 2px 3px rgb(128, 57, 39);
    background:url(./resources/images/img_bg_level_5.jpg) no-repeat;
    background-position: -165px -115px;
    box-shadow: 0 0 16px rgb(255, 140, 111);
}

.plane-btn {
    width: 100px;
    height: 70px;
    border-radius: 10px;
    border: 0;
    box-shadow: 0 0 16px rgb(109, 177, 255);
    margin: 1rem;
}

.plane-btn-0 {
    background:url(./resources/images/img_plane_ui0.png) no-repeat;
    background-size:100% 100%;
    width: 120px;
    height: 84px;
}
.plane-btn-1 {
    background:url(./resources/images/img_plane_ui1.png) no-repeat;
    background-size:100% 100%;
}
.plane-btn-2 {
    background:url(./resources/images/img_plane_ui2.png) no-repeat;
    background-size:100% 100%;
}
.plane-btn-3 {
    background:url(./resources/images/img_plane_ui3.png) no-repeat;
    background-size:100% 100%;
}

.float-left {
    float: left;
}
.float-right {
    float: right;
}

.controller {
    z-index: 1;
    position: fixed;
    left: 0;
    bottom: 10%;
    width: 100%;
    height: auto;
}
.controller .handle {
    width: auto;
    height: auto;
}

.controller .handle .handle-wrap {
    width: 100px;
    height: 100px;
    margin-left: 2rem;
    border-radius: 100%;
    background: rgba(43, 119, 180, .4);
}

.controller .handle .handle-wrap .handle-ctrl {
    position: relative;
    top:25px;
    left: 25px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: url(./resources/images/img_finger_ui.png) no-repeat;
    background-size: 100% 100%;
    /* background-color: rgba(211, 45, 45, .8); */
}

.controller .handle .shot-wrap {
    width: 100px;
    height: 100px;
    margin-right: 2rem;
}

.controller .handle .shot-wrap .shot-ctrl {
    position: relative;
    top:25px;
    left: 25px;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border: 7px solid rgb(240, 107, 107);
    background: url(./resources/images/img_bullet_ui.png) no-repeat;
    background-size: 80% 80%;
    background-repeat:no-repeat;
    background-position:center;
}

.panel {
    z-index: 1;
    position: fixed;
    top: 0;left: 0;
    width: 100%;
    height: 100px;
    /* background: rgba(255, 255, 255, 0.1); */
}
.panel .panel-left, .panel .panel-right {
    float: left;
    width: 50%;
    height: 100%;
}
.blood-strip, .bullet-font {
    margin-left: 10%;
}

.panel .panel-left .blood-strip {
    float: left;
    width: 50%;
    height: auto;
    margin-top: 10px;
    border: 1px solid rgba(240,128,128, 1);
    border-radius: 6px;
}
.panel .bullet-font {
    margin-top: 10px;
    width: 100%;
    line-height: 20px;
}
.bullet-font, .bullet-font * {
    height: 20px;
    font-size: 1.2rem;
    color: rgba(144,238,144, .7);
    text-shadow: .5px .5px .5px rgb(70, 70, 70);
    font-weight: bold;
}

.distance-box, .distance-box * {
    width: auto;
    height: 20px;
    font-size: 1.5rem;
    font-weight: bold;
}
.distance-box {
    margin-top: 10px;
    margin-right: 30px;
    text-align: right;
    color: rgba(240,230,140, .8);
    text-shadow: 1px 1px 1px rgb(70, 70, 70);
}

.color-tomato, .color-tomato * {
    color: rgba(255,69,0, .8);
    text-shadow: .5px .5px .5px rgb(70, 70, 70);
}

.blood-strip .blood-fill {
    float: left;
    width: 40%;
    height: 20px;
    line-height: 20px;
    background: rgba(240,128,128, .8);
    border-radius: 6px;
    text-align: center;
    color: white;
    text-shadow: .5px .5px .5px rgb(70, 70, 70);
}

.show-record {
    z-index: 1;
    position: fixed;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(4, 14, 31);
}
#record-image-cvs {
    border-radius: 10px;
}
.p-20 {
    padding: 20px;
}
.record-board {
    width: 200px;
    height: 200px;
    /* background: rgba(4, 14, 31, 0); */
    background-color: rgb(219, 219, 219);
    margin: 20% auto auto auto;
    border-radius: 10px;
    box-shadow:0 0 20px rgb(119, 189, 255);
}
.record-board h2 {
    font-size: 22px;
    font-weight: bold;
    line-height: 55px;
    /* text-shadow: .5px .5px .5px #fff; */
    color: rgb(81, 134, 233);
}
.record-item, .record-item * {
    font-size: 18px;
    color: rgb(62, 69, 78);
    /* text-shadow: .5px .5px .5px rgb(202, 202, 202); */
}
.record-board .record-item {
    float: left;
    width: 100%;
    margin-top: 10px;
}

.show-record .btns {
    width: 200px;
    margin: 0 auto;
    margin-top: 10px;
    user-select: none;
}

.show-record .btns p {
    width: 100%;
    text-align: center;
    color: white;
    line-height: 2rem;
    font-size: .9rem;
}

.re-btn {
    position: relative;
    top: 0;left: 50%;
    width: 70px;
    height: 35px;
    border-radius: 5px;
    color: white;
    background: #4169E1;
    margin-top: 5px;
    margin-left: -35px;
    box-shadow:0 0 20px rgb(119, 189, 255);
}

.time-box {
    color: #3CB371;
}

.introduce {
    z-index: 1;
    position: fixed;
    top:0;left:0;
    width: 100%;
    height: 100%;
    background-color: rgb(8, 20, 41);
    overflow-y: auto;
    font-size: 1.3rem;
}
.introduce p {
    text-indent: 2rem;
    padding: 2rem;
    padding-bottom: 0;
    font-size: 1.3rem;
    color: rgb(182, 222, 255);
    line-height: 35px;
}
.introduce p font {
    font-size: 1.3rem;
}
.introduce p img {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 35px;
}
.introduce p span {
    font-size: 1.2rem;
    float: left;
    width: 50%;
    line-height: 35px;
}
.introduce .wklmxd {
    margin-top: 2rem;
    width: 100%;
    height: auto;
}
.introduce .wklmxd button {
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -3rem;
    color: white;
    width: 6rem;
    height: 3rem;
    border-radius: 5px;
    background: #6495ED;
    box-shadow: 0 0 16px rgb(139, 193, 255);
}