index.css 11 KB

1
  1. a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:'microsoft yahei',Verdana,Arial,Helvetica,sans-serif}*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}a{text-decoration:none}body{overflow:hidden;font-size:16px}.page-container{padding:0 10px}.autoimg{width:100%;height:auto}.btn{padding:1em 0;border:1px solid #666;border-radius:5px;text-align:center;display:inline-block}.toptitle{text-align:center;font-size:1.25em;padding:15px 0}#pageWrapper{width:100%;min-height:480px;overflow:hidden;max-width:640px;margin:0 auto}#pages{width:100%;position:relative}.pagemodel{width:100%;min-height:480px}.page-anmi{position:absolute;top:0;left:0;-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-ms-transition:-ms-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out}.cur-page-left{-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.page-anmi-left-out{-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0)}.out-page-left,.page-anmi-right-cur{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.cur-page-right{-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0)}.page-anmi-right-out{-webkit-transform:translate(-100%,0);-ms-transform:translate(-100%,0);transform:translate(-100%,0)}.out-page-right{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)}.navigator{height:30px;width:100%;background:#c00;text-align:center;position:relative;line-height:30px;color:#FFF;vertical-align:middle}.navigator .back{width:10px;height:10px;display:inline-block;border:solid #FFf;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg);position:absolute;left:10px;top:10px}.drag-content{overflow:hidden;-webkit-transition:height .5s ease-out;-moz-transition:height .5s ease-out;-o-transition:height .5s ease-out;-ms-transition:height .5s ease-out;transition:height .5s ease-out;text-align:center}.play-container{width:312px;height:312px;margin:0 auto;margin-top:5px;position:relative}.play-container .drag-box{width:100%;height:100%;margin:0 auto;background-color:#fff}.play-container .drag-box .item{float:left;margin:1px;position:relative}.play-container .drag-box .dragstart{background-image:none!important;background-color:#f4f1f1!important;border:1px dotted #cba70e}.play-container .drag-box .dragover::before{content:"";position:absolute;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,.5)}.drag-float .item{width:100%;height:100%;vertical-align:middle;text-align:center;border:1px solid #FFF}.play-container .left-bottom,.play-container .left-top,.play-container .right-bottom,.play-container .right-top{position:absolute;width:30px;height:30px;background:#e63037;display:inline-block;z-index:-1}.play-container .left-top{left:-2px;top:-2px}.play-container .right-top{right:-2px;top:-2px}.play-container .left-bottom{left:-2px;bottom:-2px}.play-container .right-bottom{right:-2px;bottom:-2px}.play-container .masker{background:rgba(38,38,38,.5);position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;line-height:300px;vertical-align:middle}.play-container .masker .load{width:200px;height:200px;display:inline-block;border-radius:100px;border:10px solid #f6d236;vertical-align:middle;position:relative}.play-container .masker .load .first-layer,.play-container .masker .load .second-layer,.play-container .masker .load .third-layer{width:100px;height:200px;display:inline-block;position:absolute}.play-container .masker .load .first-layer{border-top-right-radius:100px;border-bottom-right-radius:100px;border:solid #FFF;border-width:10px 10px 10px 0;right:-10px;top:-10px;z-index:1;-webkit-transform-origin:0 50%;-moz-transform-origin:0 50%;-ms-transform-origin:0 50%;-o-transform-origin:0 50%;transform-origin:0 50%;-webkit-transition:-webkit-transform 4s linear;-moz-transition:-moz-transform 4s linear;-o-transition:-o-transform 4s linear;-ms-transition:-ms-transform 4s linear;transition:transform 4s linear}.play-container .masker .load .second-layer{width:100px;height:200px;display:inline-block;border-top-left-radius:100px;border-bottom-left-radius:100px;border:solid #FFF;border-width:10px 0 10px 10px;position:absolute;left:-10px;top:-10px;z-index:2;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-ms-transform-origin:100% 50%;-o-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition:-webkit-transform 2s linear 2s;-moz-transition:-moz-transform 2s linear 2s;-o-transition:-o-transform 2s linear 2s;-ms-transition:-ms-transform 2s linear 2s;transition:transform 2s linear 2s}.play-container .masker .load .third-layer{border-top-right-radius:100px;border-bottom-right-radius:100px;border:solid #f6d236;border-width:10px 10px 10px 0;right:-10px;top:-10px;z-index:3;opacity:0;-webkit-transition:opacity 0s linear 2s;-moz-transition:opacity 0s linear 2s;-o-transition:opacity 0s linear 2s;-ms-transition:opacity 0s linear 2s;transition:opacity 0s linear 2s}.play-container .masker .loading .first-layer{-webkit-transform:rotate(358deg)}.play-container .masker .loading .second-layer{-webkit-transform:rotate(178deg)}.play-container .masker .loading .third-layer{opacity:1}.play-container .masker .loaded .first-layer,.play-container .masker .loaded .second-layer,.play-container .masker .loaded .third-layer{display:none}.play-container .masker .load .play-button{width:0;height:0;border-top:60px solid transparent;border-bottom:60px solid transparent;border-left:75px solid rgba(256,256,256,.3);display:inline-block;margin-left:30px}.play-container .masker .loaded .play-button{border-left:75px solid rgba(246,210,54,1)}.play-container .masker .countdown .count-down{display:block}.play-container .masker .count-down.down .play-button,.play-container .masker .countdown .play-button{display:none}.play-container .masker .count-down{color:#FFF;font-size:140px;text-align:center;vertical-align:middle;line-height:180px;width:100%;overflow:hidden}.play-container .masker .count-down ul{display:none;width:300%}.play-container .masker .count-down.down ul{display:block}.play-container .masker .count-down ul li{float:left;width:33.3333333%}.play-container .done{position:absolute;bottom:10px;color:#f6d236;right:10px;-webkit-transition:-webkit-transform,opacity 1s linear;display:none;opacity:0}.play-container .done.doned{opacity:1;-webkit-transform:translate(0,-20px)}.playanmal{-webkit-animation:countdown 2.5s ease-in 0s;-webkit-transform:translate(-66.666%,0)}@-webkit-keyframes countdown{0%,33.333%{-webkit-transform:translate(0,0)}40%,66.666%{-webkit-transform:translate(-33.33333%,0)}100%,73%{-webkit-transform:translate(-66.666%,0)}}.timer{margin-top:15px;text-align:center;overflow:hidden;display:inline-block;width:312px}.timer .timer-con{background-color:#d1c0a6;border-radius:15px;display:inline-block;padding:5px 10px;color:#FFF;font-size:18px;vertical-align:middle;min-width:110px;text-align:left}.timer .timer-con .timer-icon{width:22px;height:22px;display:inline-block;border:1px solid #FFF;border-radius:11px;position:relative}.timer .timer-con .timer-icon::before{content:"";height:9px;width:7px;display:inline-block;border:solid #FFF;border-width:0 0 1px 1px;position:absolute;top:3px;left:8px}.timer .t{margin-left:5px;vertical-align:text-top;line-height:14px}.timer .kapics{color:#b71520;font-size:18px;margin-top:5px}.footer{margin-top:20px;padding-bottom:20px;text-align:center;font-size:18px;color:#cfcfcf}.footer h1{width:100%;height:1px;background-color:#e6e6e6;margin-bottom:20px}.play-info{margin-top:20px;text-align:center;color:#393939;font-size:15px}.play-info .first-guide{font-size:18px;color:#bb2630}.playing-over{margin-top:20px}.playing-over span:nth-child(2){margin-left:20px}.shownextka{width:100%;height:100%;background-color:#FFF;color:#bb2630;font-size:30px;text-align:center;display:inline-block}.shownextka .lastpic{margin-top:40px}.shownextka .lastpic img{vertical-align:top;width:100px;height:100px}.shownextka .msg{margin-top:30px;line-height:40px}.shownextka .opera{margin-top:95px;font-size:15px;color:#393939}.shownextka .opera span{margin-left:40px}.shownextka .opera .red{color:#bb2630;margin-left:0}.initloading{text-align:center;line-height:500px;vertical-align:middle}.normal-loading{width:1em;height:1em;display:inline-block;border-radius:2em;border-top:2px solid rgba(0,0,0,.8);border-right:2px solid rgba(0,0,0,.8);border-bottom:2px solid rgba(0,0,0,.2);border-left:2px solid rgba(0,0,0,.2);-webkit-animation:animations 800ms linear infinite;animation:animations 800ms linear infinite;background-color:rgba(0,0,0,.3)}@-webkit-keyframes animations{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}.dialog{width:300px;border:1px solid #a3a3a3;border-radius:5px;background-color:#f8f8f8}.dialog .content{padding:15px}.dialog .message{height:70px;font-size:14px;padding:10px 20px}.dialog .content h1{width:100%;height:1px;background-color:#f0f0f0}.dialog .dig-btns{text-align:center}.dialog .dig-btns .dig-btn{width:40%;border:1px solid #cecece;height:30px;line-height:30px;vertical-align:middle;display:inline-block}.dialog .dig-btns .dig-btn:nth-child(n+2){border:1px solid #d38b27;color:#d38b27;margin-left:20px}.guide{background-color:#f4f1f1}.guide .btn{text-align:center;width:80%;margin:0 auto}.guide a.btn{color:#F90}.btn-con{text-align:center;margin-top:30px}.game-desc{padding:0 15px}.game-desc img{vertical-align:top;width:76px;height:70px;margin-right:10px;float:left}.game-desc>div{vertical-align:bottom;height:70px;position:relative}.game-desc>div>span{position:absolute;bottom:0}.categorys{margin-bottom:20px;padding:0 15px}.categorys .cate-name{font-weight:700;color:#000;font-size:14px;margin-top:30px}.categorys img{width:100%;height:auto;margin-top:20px}.categorys .btn-con .btn{width:80%}