.loading { width: 100%; height: 100%; } .loading img { width: 100%; height: 100%; } /*进度条*/ .flex-center { display: flex; flex-direction: column; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); bottom: 10%; } .flex-center h3{ font-size: .3rem; color: #163E49; margin-bottom: .1rem; } .container { display: inline-block; width: 8.09rem; height: .23rem; background: #3B7686; border: 2px solid #FFFFFF; box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.35); border-radius: 11px; position: relative; } .h-100P { height: 100%; position: absolute; left: 0; bottom: 0; } span.h-100P text { display: inline-block; width: .29rem; height: .29rem; border-radius: .29rem; background: #FFE54A; position: absolute; margin-left: -.28rem; margin-top: -.02rem; border: 1px solid #fff; z-index: 9999; } .bar { display: inline-block; background: #FFE54A; color: white; font-weight: bold; /*padding: 0 5px;*/ text-align: right; border-radius: 5px; border-right: 1px solid #999; } .bar:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 186, 0, 1)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 186, 0, 1)), color-stop(.75, rgba(255, 186, 0, 1)), color-stop(.75, transparent), to(transparent)); background-image: -moz-linear-gradient( -45deg, rgba(255, 186, 0, 1) 25%, transparent 25%, transparent 50%, rgba(255, 186, 0, 1) 50%, rgba(255, 186, 0, 1) 75%, transparent 75%, transparent); z-index: 1; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px; -webkit-animation: move 2s linear infinite; -moz-animation: move 2s linear infinite; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; } /*进度条 end*/ .loading { display: block; } .begin { display: none; } #game1 { display: none; } .secondGame, #game2 { width: 100%; height: 100%; } .begin, .firstGame, .thirdGame, .fourGame, .fiveGame, .win, #begin, #game1, #game3, #game4, #game5, #success { width: 100%; height: 100%; } p.bgm { width: 100%; height: 100%; } /*开始游戏页*/ /* #game2{ display:none ; } #game3{ display: none; } #game4{ display: none; } #game5{ display: none; } #success{ display: none; }*/ /*成功*/ .successBox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 9.53rem; height: 5.83rem; background: url(../img/success.png) no-repeat; background-size: 100% 100%; /*display: flex;*/ justify-content: center; align-items: flex-end; display: none; z-index: 99; } .successBox p { width: 2.54rem; height: .84rem; margin-bottom: 1.09rem; } .successBox p img { width: 100%; height: 100%; } .successBox div.shut { position: absolute; top: 1%; right: 10%; width: .546rem; height: .546rem; } .successBox div.shut img { width: 100%; height: 100%; } /*.clickIcon li{ background: #000000; opacity: .5; }*/ .imgList li p{ width: 1.21rem; height: 1.2rem; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.5); z-index: 999999; border-radius: 5px; } p.bgm img{ width: 100%; height: 100%; } p.bgm img:nth-child(1){ opacity: 1; } p.bgm img:nth-child(2){ opacity: 0; position: absolute; left: 0; top: 0; } .textList{ transition: all 1s linear; }