body{ background:#85d252; } img{width:100%;} .rabbitLoading{ background:#6584A3; position:absolute; left:0; top:0; width:100%; min-width:320px; max-width:640px; height:100%; z-index:9999; } .rabbitLoad{ position:absolute; width:80%; top:25%; left:10%; padding-bottom:20px; } .rabbitLoad img{ width:50%; position:relative; z-index:1; padding-bottom:40px; } .progressbar{ background:#A69DB9; height:16px; width:100%; border-radius:3px; overflow:hidden; position:relative; border:3px #745CAB solid; margin-top:-10px; z-index:9; } .progressing{ background:#BC7EA9; position:absolute; width:0%; height:100%; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .main{ position:absolute; width:100%; min-width:320px; /*max-width:640px;*/ margin:auto; height:100%; overflow:hidden; -webkit-transform-origin:50% 0; transform-origin:50% 0; } .sence{ position:absolute; width:100%; height:100%; left:0; top:0; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; opacity:0; z-index:-1; overflow:hidden; } .sence0{ background:url(start.jpg) no-repeat; background-size:100%; z-index:1; } .sence1{ opacity:0; background:url(bg.jpg) no-repeat; background-size:100%; } .rabbitFront{ position:absolute; top:8%; left:34%; width:32%; } .rabbitFront .rabbitHand{ position:absolute; width:18.2%; top:65%; left:55.6%; z-index:999; } .rabbitFront .rabbitHand img{ -webkit-transform-origin:50% 0; transform-origin:50% 0; } .rabbitBack{ position:absolute; bottom:-5px; left:32%; width:34%; z-index:99; } .jumpLineCtxBox{ position:absolute; width:100%; top:0; left:0; height:100%; } .jumpLineCtx, .jumpLine2Ctx{ position:absolute; width:100%; height:100%; left:0; top:0; background:none; z-index:9; } .jumpLineCtx{opacity:0;} .jumpLine2Ctx{opacity:1;z-index:9;} .jumpLineImg{ position:absolute; top:28%; width:60%; left:24%; } .jumpLineImg img{ position:absolute; left:0; top:0; display:none; z-index:9; } .tortoiseBox{ position:absolute; width:100%; height:19.8%; top:52%; z-index:5; } .tortoiseBox img{ position:absolute; left:0; top:0; width:100%; } .tortoise1 img,.tortoise2 img,.tortoise3 img,.tortoise4 img{ display:none; } .tortoise1{ position:absolute; width:20%; top:24%; right:-20%; -webkit-transition: all .5s linear; transition: all .5s linear; } @-webkit-keyframes tortoiseA1{ 0%{ top:24%; } 60%{ top:0%; } 100%{ top:24%; } } @keyframes tortoiseA1{ 0%{ top:24%; } 60%{ top:0%; } 100%{ top:24%; } } .tortoise2{ position:absolute; width:20.2%; top:21%; right:-20.2%; -webkit-transition: all .5s linear; transition: all .5s linear; } @-webkit-keyframes tortoiseA2{ 0%{ top:21%; } 60%{ top:-3%; } 100%{ top:21%; } } @keyframes tortoiseA2{ 0%{ top:21%; } 60%{ top:-3%; } 100%{ top:21%; } } .tortoise3{ position:absolute; width:27.3%; top:5%; right:-27.3%; -webkit-transition: all .5s linear; transition: all .5s linear; } @-webkit-keyframes tortoiseA3{ 0%{ top:5%; } 60%{ top:-16%; } 100%{ top:5%; } } @keyframes tortoiseA3{ 0%{ top:5%; } 60%{ top:-16%; } 100%{ top:5%; } } .tortoise4{ position:absolute; width:20.2%; top:21%; right:-20.2%; -webkit-transition: all .5s linear; transition: all .5s linear; } @-webkit-keyframes tortoiseA4{ 0%{ top:21%; } 60%{ top:-3%; } 100%{ top:21%; } } @keyframes tortoiseA4{ 0%{ top:21%; } 60%{ top:-3%; } 100%{ top:21%; } } .scoreBox{ position:absolute; width:90%; right:5%; top:1%; text-align:right; } .scoreBox img{ width:4.68%; } .ctrlBox{ position:absolute; width:100%; height:100%; z-index:999; } .gameEndBox{ position:absolute; width:100%; left:0; top:0; } .mark{ width:50%; text-align:left; position:absolute; top:42.8%; left:36%; line-height:1; } .mark img{ width:9.24%; } .btn{ position:absolute; width:30%; font-size:2em; top:77%; cursor:pointer; } .restartBtn{ left:11.25%; } .shareBtn{ right:11.25%; } .paihangBtn{ top:87%; left:35.25%; } .xinbuBtn{ top:87%; right:11.25%; } .bannerText{ position:absolute; bottom:2%; left:0; width:100%; font-size:1.2em; color:#FD2D2D; text-align:center; text-shadow:0 0 10px #fff; box-shadow:0 0 10px #fff; -webkit-animation: bannerText 1s linear infinite; animation: bannerText 1s linear infinite; background:rgba(0255,255,255,0.2); z-index:9999; } @-webkit-keyframes bannerText{ 0%{ text-shadow:0 0 10px #fff; } 50%{ text-shadow:0 0 30px #fff; } 100%{ text-shadow:0 0 10px #fff; } } @keyframes bannerText{ 0%{ text-shadow:0 0 10px #fff; } 50%{ text-shadow:0 0 30px #fff; } 100%{ text-shadow:0 0 10px #fff; } } .bannerText .text{ -webkit-transform:translate(0,0); transform:translate(0,0); -webkit-animation: btext 10s linear infinite; animation: btext 10s linear infinite; } @-webkit-keyframes btext{ 0%{ color:#FD2D2D; } 100%{ color:#f64; } } @keyframes btext{ 0%{ color:#FD2D2D; } 100%{ color:#f64; } }