1006 lines
22 KiB
CSS
1006 lines
22 KiB
CSS
body{
|
|
background: #413f40;
|
|
padding: 20px;
|
|
padding-bottom: 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.iframe-box{position: fixed; top: 0; left: 0; width: 80%; height: 88%; padding:6% 10% 0; background: rgba(0,0,0,0.5); z-index: 999;}
|
|
.iframe-box .title{text-align: center; font-size: 14px; position: relative; background:#fff; font-weight: normal; padding: 5px; border-bottom: 1px solid #ccc;}
|
|
.iframe-box iframe{width: 100%; min-height: 720px;}
|
|
.off-btn{position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; text-align: center; line-height: 30px; border-radius: 100px; background: #fff; -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.45); box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.45);}
|
|
.section{
|
|
min-height: 630px;
|
|
}
|
|
.section .head{
|
|
height: 17vh;
|
|
background: url(../new_img/head_bg.png) repeat-x;
|
|
-webkit-background-size: auto 100%;
|
|
background-size: auto 100%;
|
|
border-radius: 10px;
|
|
border-left: 2px solid #4a4a46;
|
|
border-right: 2px solid #4a4a46;
|
|
overflow: hidden;
|
|
display: table;
|
|
width: 100%;
|
|
min-height: 112px;
|
|
}
|
|
|
|
.section .head .logo{
|
|
/*height: 100%;*/
|
|
background: url(../../hc-logo-1.png) center center no-repeat;
|
|
width: 12vw;
|
|
-webkit-background-size: 9vw;
|
|
background-size: 9vw;
|
|
display: table-cell;
|
|
}
|
|
|
|
.section .head .box{
|
|
height: 100%;
|
|
display: table-cell;
|
|
padding: 0 20px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.section .head .box .list{
|
|
display: table;
|
|
padding-top: 3.2vh;
|
|
width:100%;
|
|
}
|
|
|
|
.section .head .box .list .item{
|
|
color: #fff;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
height:4.2vh;
|
|
line-height: 4vh;
|
|
float: left;
|
|
|
|
}
|
|
|
|
.section .head .input-box{
|
|
background: url(../new_img/input_box.png);
|
|
-webkit-background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
width: 20%;
|
|
margin-right: 3%;
|
|
padding:5px;
|
|
padding-left: 70px;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
}
|
|
.section .head .input-box.m0{
|
|
margin-right: 0;
|
|
}
|
|
|
|
.section .head .input-box input{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
float: left;
|
|
background: url(../new_img/input-bg.png);
|
|
-webkit-background-size: 100 100%%;
|
|
background-size: 100% 100%;
|
|
padding-left: 20px;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
}
|
|
.section .head .input-box label{
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 0;
|
|
vertical-align: middle;
|
|
text-shadow: 0px 1px 0px #6f493a;
|
|
}
|
|
|
|
.section .head .box .list .date{
|
|
width: 34%;
|
|
text-align: right;
|
|
line-height: 4.8vh;
|
|
}
|
|
.section .head .box .list .date p{
|
|
display: inline-block;
|
|
width: 220px;
|
|
text-align: left;
|
|
}
|
|
.section .head .box .list .date span{
|
|
background: #ab7963;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.section .head .box .list .notice{
|
|
height:4.2vh;
|
|
line-height: 4.2vh;
|
|
background: #606463;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
.notice .scroll{
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
.notice .scroll ul{
|
|
width: 200000px;
|
|
}
|
|
|
|
.notice .scroll ul li{
|
|
float: left;
|
|
color:#ddd;
|
|
font-size: 15px;
|
|
padding: 0 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
|
|
.canvas-box{
|
|
border: 2px solid #87756c;
|
|
background: #4a3d3a;
|
|
border-radius: 5px;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
padding: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
.canvas-box.small{
|
|
height: 66vh;
|
|
margin-bottom: 0.5vh;
|
|
min-height: 150px;
|
|
position: relative;
|
|
}
|
|
|
|
.canvas-box.small canvas{
|
|
width: 100%;
|
|
}
|
|
|
|
.canvas-box.big{
|
|
height: 31vh;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.canvas-box .active-box{
|
|
position: absolute;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
width: 360px;
|
|
background: url(../new_img/active_bg.jpg) repeat-x;
|
|
border-radius: 5px;
|
|
-webkit-background-size: auto 100%;
|
|
background-size: auto 100%;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
padding: 1.5vh;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
}
|
|
.canvas-box .active-box .item{
|
|
width: 100px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
.canvas-box .active-box .item:first-child{
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
|
|
.canvas-box .item:last-child{
|
|
margin-top: 5px;
|
|
}
|
|
.canvas-box .active-box p{
|
|
position: absolute;
|
|
left: 110px;
|
|
top: 50%;
|
|
margin-top: -22px;
|
|
}
|
|
|
|
.canvas-box .active-box strong{
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.footer{
|
|
display:flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.footer .canvas-box{
|
|
flex:3;
|
|
}
|
|
|
|
.canvas-box canvas{
|
|
background: #fff;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.table-data{
|
|
background: url(../new_img/dn_bg.png) repeat-x;
|
|
border-radius: 5px;
|
|
height: 12.5vh;
|
|
-webkit-background-size: auto 100%;
|
|
background-size: auto 100%;
|
|
padding: 0 20px;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.table-data .lan-top li{
|
|
float: left;
|
|
width: 100%;
|
|
color: #fff;
|
|
width: 16.666%;
|
|
text-align: center;
|
|
margin: 1vh 0;
|
|
}
|
|
.table-data .lan-top .title strong{
|
|
display: block;
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
}
|
|
.table-data .lan-top .title small{
|
|
color: #000;
|
|
font-size: 600;
|
|
font-size: 13px;
|
|
}
|
|
.table-data .lan-top p{
|
|
background-color: #fff;
|
|
color: #76432f;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-top: 1vh;
|
|
}
|
|
.table-data .lan-top li:first-child p{
|
|
border-top-left-radius: 100px;
|
|
border-bottom-left-radius: 100px;
|
|
}
|
|
.table-data .lan-top li:last-child p{
|
|
border-top-right-radius: 100px;
|
|
border-bottom-right-radius: 100px;
|
|
}
|
|
|
|
/*
|
|
.table-data .title{
|
|
width: 100%;
|
|
display: table;
|
|
text-align: center;
|
|
|
|
}
|
|
.table-data .title li{
|
|
display: table-cell;
|
|
color: #3c180a;
|
|
width: 20%;
|
|
position: relative;
|
|
}
|
|
.table-data .title li:after{
|
|
content: "";
|
|
border-left: 1px solid #e8ccbf;
|
|
height: 30px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
margin-top: -15px;
|
|
}
|
|
.table-data .title li:last-child:after{
|
|
border: none;
|
|
}
|
|
|
|
.table-data .title li>*{
|
|
display: block;
|
|
}
|
|
.table-data .title li strong{
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
text-shadow: 0px 1px 0px #fff;
|
|
}
|
|
.table-data .title li small{
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.table-data .top{
|
|
background: #fff;
|
|
width: 100%;
|
|
display: table;
|
|
text-align: center;
|
|
border-radius: 2px;
|
|
margin-top: 1vh;
|
|
line-height: 3vh;
|
|
font-weight: 500;
|
|
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
}
|
|
.table-data .top span{
|
|
display: table-cell;
|
|
color: #3c180a;
|
|
width: 20%;
|
|
}
|
|
.table-data .lan-box{
|
|
padding-top: 1vh;
|
|
text-align: center;
|
|
line-height: 3vh;
|
|
}
|
|
.table-data .lan-box .item{
|
|
width: 50%;
|
|
color: #3c180a;
|
|
}
|
|
.table-data .lan-box .item span {
|
|
font-weight: 500;
|
|
}*/
|
|
.limit-box .list{
|
|
padding: 1vh 0;
|
|
position: relative;
|
|
font-size: 14px;
|
|
color: #3c180a;
|
|
line-height: 3vh;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.limit-box .list .lab{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
text-align: center;
|
|
padding:1vh 0;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
width: 35px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.limit-box .list .item{
|
|
background: #fff;
|
|
width: 48%;
|
|
border-radius: 2px;
|
|
padding: 0 10px;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) inset;
|
|
}
|
|
.limit-box .list .item small{
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
}
|
|
.limit-box .list .item span{
|
|
font-size: 13px;
|
|
}
|
|
|
|
|
|
.control-box{
|
|
position: fixed;
|
|
right: -410px;
|
|
top: 19vh;
|
|
background: rgba(21, 34, 34, 0.71);
|
|
width: 410px;
|
|
height: 46.5vh;
|
|
text-align: center;
|
|
z-index: 1000;
|
|
}
|
|
.control-box .slide-btn{
|
|
opacity: 0;
|
|
background: rgba(21, 34, 34, 0.71);
|
|
position: absolute;
|
|
height: 65px;
|
|
border-radius: 100px 0 0 100px;
|
|
width: 30px;
|
|
left: -35px;
|
|
top: 50%;
|
|
margin-top: -32.5px;
|
|
cursor: pointer;
|
|
color: #ddd;
|
|
line-height: 65px;
|
|
font-size: 20px;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
|
|
.control-box .btn-box1{
|
|
padding: 7vh 0;
|
|
}
|
|
.control-box .btn-box1 span{
|
|
cursor: pointer;
|
|
width: 110px;
|
|
height: 35px;
|
|
display: inline-block;
|
|
margin:0 10px ;
|
|
line-height: 35px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
border-radius: 5px;
|
|
-webkit-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
|
|
.control-box .btn-box2 span{
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
background: #c0bbbb;
|
|
font-weight: 500;
|
|
margin: 0 4px;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
-webkit-box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.control-box .btn-box2 span.on{
|
|
background: #0b6140;
|
|
-webkit-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset, 0px 6px 5px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset, 0px 6px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.control-box .btn-box3{
|
|
padding: 5vh 0;
|
|
}
|
|
.control-box .btn-box3 span{
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 160px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
margin: 0 4px;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
-webkit-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
box-shadow: 0px 0px 3px rgba(255, 255, 255, 0.5) inset,0px 6px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.control-box .btn-box4 span{
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
background: #a07667;
|
|
font-weight: 500;
|
|
margin: 0 4px;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
-webkit-box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
-moz-box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
box-shadow: 0px 6px 5px rgba(0,0,0,0.2);
|
|
cursor: pointer;
|
|
}
|
|
.control-box .btn-box1 span:active,
|
|
.control-box .btn-box3 span:active,
|
|
.control-box .btn-box4 span:active{
|
|
opacity: 0.7;
|
|
}
|
|
.control-box .green_bg{
|
|
background: #0b6140;
|
|
}
|
|
.control-box .red_bg{
|
|
background: #7a1e1e;
|
|
}
|
|
|
|
|
|
.countdown{
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 999;
|
|
width: 210px;
|
|
height: 210px;
|
|
background: rgba(21, 34, 34, 0.71);
|
|
bottom: 5px;
|
|
right: 5px;
|
|
}
|
|
.countdown .roll{
|
|
position: absolute;
|
|
width: 180px;
|
|
height: 180px;
|
|
top:50%;
|
|
left: 50%;
|
|
margin-left: -90px;
|
|
margin-top: -90px;
|
|
|
|
-webkit-animation: rotate 1s linear 1s 5 alternate;
|
|
animation: rotate 1s linear infinite;
|
|
}
|
|
|
|
|
|
|
|
|
|
.countdown .num{
|
|
color: #fff;
|
|
font-size: 60px;
|
|
position: relative;
|
|
font-weight: 500;
|
|
z-index: 999;
|
|
text-align: center;
|
|
line-height: 210px;
|
|
text-shadow: 0px 1px 0px #555;
|
|
}
|
|
|
|
.countdown .inner, .inner2 {
|
|
position: absolute;
|
|
width: 170px;
|
|
height: 170px;
|
|
border-radius: 170px;
|
|
overflow: hidden;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-top: -85px;
|
|
margin-left: -85px;
|
|
}
|
|
.countdown .inner {
|
|
opacity: 1;
|
|
background-color: #d4b0a3;
|
|
animation: second-half-hide 2s steps(1, end) infinite;
|
|
}
|
|
.countdown .inner2 {
|
|
opacity: 0;
|
|
background-color: #a9735f;
|
|
animation: second-half-show 2s steps(1, end) infinite;
|
|
}
|
|
.countdown .spiner, .filler, .masker {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
.countdown .spiner {
|
|
border-radius: 40px 0 0 40px;
|
|
background-color: #a9735f;
|
|
transform-origin: right center;
|
|
animation: spin 1s infinite linear;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.countdown .filler {
|
|
border-radius: 0 40px 40px 0;
|
|
background-color: #a9735f;
|
|
animation: second-half-hide 1s steps(1, end) infinite;
|
|
left: 50%;
|
|
top: 0;
|
|
opacity: 1;
|
|
}
|
|
.countdown .masker {
|
|
border-radius: 40px 0 0 40px;
|
|
background-color: #d4b0a3;
|
|
animation: second-half-show 1s steps(1, end) infinite;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
.countdown .inner2 .spiner, .inner2 .filler {
|
|
background-color: #d4b0a3;
|
|
}
|
|
.countdown .inner2 .masker {
|
|
background-color: #a9735f;
|
|
}
|
|
|
|
|
|
/*结果弹窗*/
|
|
.result-box{
|
|
position: absolute;
|
|
z-index: 1000;
|
|
top: 0;
|
|
left: 0;
|
|
width: 320px;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -160px;
|
|
margin-top: -270px;
|
|
/* -webkit-animation: bounceIn .5s 0s ease both;
|
|
-moz-animation: bounceIn .5s 0s ease both;*/
|
|
}
|
|
|
|
.result-box.blink{
|
|
-webkit-animation: bounceIn 1s 0s ease both infinite;
|
|
-moz-animation: bounceIn 1s 0s ease both infinite;
|
|
}
|
|
|
|
.canvas-main{
|
|
position: relative;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*自动翻牌*/
|
|
.begincard{
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 999;
|
|
display: none;
|
|
}
|
|
.begincard .box{
|
|
position: absolute;
|
|
width: 274px;
|
|
left: 0%;
|
|
/*margin-left: -386px;*/
|
|
top:0%;
|
|
margin-top: -753px;
|
|
background:url(../img/border.png);
|
|
background-size: 100% 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
opacity: 0;
|
|
}
|
|
.xuanzhuan{
|
|
height: 89.16px;
|
|
width: 125.04px;
|
|
-webkit-transform: rotate(90deg);
|
|
-moz-transform: rotate(90deg);
|
|
-o-transform: rotate(90deg);
|
|
-ms-transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
.begincard .box1{
|
|
position: absolute;
|
|
width: 600px;
|
|
left: 0%;
|
|
/*margin-left: -386px;*/
|
|
top:0%;
|
|
margin-top: -624px;
|
|
background:url(../img/border.png);
|
|
background-size: 100% 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
opacity: 0;
|
|
}
|
|
.begincard .box2{
|
|
position: absolute;
|
|
width: 600px;
|
|
left: 0%;
|
|
/*margin-left: -386px;*/
|
|
top:0%;
|
|
margin-top: -475px;
|
|
background:url(../img/border.png);
|
|
background-size: 100% 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
opacity: 0;
|
|
}
|
|
.begincard .box3{
|
|
position: absolute;
|
|
width: 600px;
|
|
left: 0%;
|
|
/*margin-left: -386px;*/
|
|
top:0%;
|
|
margin-top: -326px;
|
|
background:url(../img/border.png);
|
|
background-size: 100% 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
opacity: 0;
|
|
}
|
|
.begincard .box4{
|
|
position: absolute;
|
|
width: 600px;
|
|
left: 0%;
|
|
/*margin-left: -386px;*/
|
|
top:0%;
|
|
margin-top: -177px;
|
|
background:url(../img/border.png);
|
|
background-size: 100% 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
opacity: 0;
|
|
}
|
|
|
|
.begincard .list{
|
|
/*display: inline-block;*/
|
|
margin:10px 10px;
|
|
vertical-align: middle;
|
|
/*margin-bottom: 20px;*/
|
|
text-align:right;
|
|
}
|
|
.begincard .word{
|
|
position: relative;
|
|
color: #e9ef07;
|
|
font-size: 36px;
|
|
left:-10px;
|
|
top:-115px;
|
|
/*width: 30px;*/
|
|
}
|
|
.begincard .banker{
|
|
position: relative;
|
|
color: red;
|
|
font-size: 42px;
|
|
left:0px;
|
|
top:-138px;
|
|
}
|
|
.begincard .banker_result{
|
|
position: relative;
|
|
color: #fff;
|
|
font-size: 38px;
|
|
left:20px;
|
|
top:-140px;
|
|
width: 76px;
|
|
}
|
|
.begincard .player_1_result{
|
|
position: relative;
|
|
color: #fff;
|
|
font-size: 34px;
|
|
left:20px;
|
|
top:-140px;
|
|
width: 68px;
|
|
}
|
|
.begincard .player_2_result{
|
|
position: relative;
|
|
color: #fff;
|
|
font-size: 34px;
|
|
left:20px;
|
|
top:-140px;
|
|
width: 68px;
|
|
}
|
|
.begincard .player_3_result{
|
|
position: relative;
|
|
color: #fff;
|
|
font-size: 34px;
|
|
left:20px;
|
|
top:-140px;
|
|
width: 68px;
|
|
}
|
|
.begincard .player{
|
|
position: relative;
|
|
color: #00f1ff;
|
|
font-size: 42px;
|
|
left:0px;
|
|
top:-138px;
|
|
width: 66px;
|
|
}
|
|
.begincard .list .card{
|
|
width: 89.76px;
|
|
height: 125.04px;
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
background-color: #fff;
|
|
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.15);
|
|
box-shadow: 0 1px 1px rgba(0,0,0,.15);
|
|
position: relative;
|
|
font-size: 18px;
|
|
color: #000;
|
|
overflow: hidden;
|
|
opacity:0;
|
|
}
|
|
|
|
.begincard .list .card .face{
|
|
background-image: url('../../faces/faces.png');
|
|
height: 100%;
|
|
background-position: 50% 50%;
|
|
-webkit-background-size: 100% 100%;
|
|
-moz-background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
.begincard .list .card.begin{
|
|
-webkit-backface-visibility: visible!important;
|
|
backface-visibility: visible!important;
|
|
-webkit-animation-name: flipInY;
|
|
animation-name: flipInY
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite
|
|
-webkit-animation-duration: 2s;
|
|
animation-duration: 2s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both
|
|
}
|
|
|
|
|
|
|
|
.result_img{
|
|
position: absolute;
|
|
z-index: 999;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 200px;
|
|
height: 128px;
|
|
margin-left: -100px;
|
|
margin-top:-128px;
|
|
-webkit-animation: bounceIn .5s 0s ease both;
|
|
-moz-animation: bounceIn .5s 0s ease both;
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
/*问路*/
|
|
.canvas-box .active-box .item{
|
|
width:155px;
|
|
}
|
|
.canvas-box .active-box p{
|
|
left:166px;
|
|
}
|
|
.canvas-box .active-box .tip{
|
|
display:inline-block;
|
|
width:18px;
|
|
height:18px;
|
|
vertical-align: top;
|
|
box-sizing:border-box;
|
|
-moz-box-sizing:border-box;
|
|
-webkit-box-sizing:border-box;
|
|
position: relative;
|
|
margin:2px 0;
|
|
opacity:0;
|
|
}
|
|
|
|
.canvas-box .active-box .circle{
|
|
border-radius: 100%;
|
|
border: 2px solid #000;
|
|
}
|
|
|
|
|
|
|
|
.canvas-box .active-box .round{
|
|
background: #000;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.canvas-box .active-box .bar:after{
|
|
top: -1px;
|
|
left: 8px;
|
|
content:"";
|
|
position: absolute;
|
|
width:3px;
|
|
height:20px;
|
|
background: #000;
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);
|
|
}
|
|
.canvas-box .active-box .bar.red:after{
|
|
background:red;
|
|
}
|
|
.canvas-box .active-box .bar.blue:after{
|
|
background:blue;
|
|
}
|
|
|
|
|
|
/*自动翻牌*/
|
|
@-webkit-keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0
|
|
}
|
|
0%,40% {
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateY(-20deg);
|
|
transform: perspective(400px) rotateY(-20deg)
|
|
}
|
|
60% {
|
|
-webkit-transform: perspective(400px) rotateY(10deg);
|
|
transform: perspective(400px) rotateY(10deg);
|
|
opacity: 1
|
|
}
|
|
80% {
|
|
-webkit-transform: perspective(400px) rotateY(-5deg);
|
|
transform: perspective(400px) rotateY(-5deg)
|
|
}
|
|
to {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px)
|
|
}
|
|
}
|
|
|
|
@keyframes flipInY {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotateY(90deg);
|
|
transform: perspective(400px) rotateY(90deg);
|
|
opacity: 0
|
|
}
|
|
0%,40% {
|
|
-webkit-animation-timing-function: ease-in;
|
|
animation-timing-function: ease-in
|
|
}
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotateY(-20deg);
|
|
transform: perspective(400px) rotateY(-20deg)
|
|
}
|
|
60% {
|
|
-webkit-transform: perspective(400px) rotateY(10deg);
|
|
transform: perspective(400px) rotateY(10deg);
|
|
opacity: 1
|
|
}
|
|
80% {
|
|
-webkit-transform: perspective(400px) rotateY(-5deg);
|
|
transform: perspective(400px) rotateY(-5deg)
|
|
}
|
|
to {
|
|
-webkit-transform: perspective(400px);
|
|
transform: perspective(400px)
|
|
}
|
|
}
|
|
|
|
|
|
.update-ludan{z-index: 1; left: 38%; top: 30%; background:#fff; min-width:400px; min-height:142px; position: fixed; box-shadow: 1px 1px 50px rgba(0,0,0,.3); border-radius: 2px; display:none;}
|
|
.update-ludan-title{padding: 0 80px 0 20px; height: 42px; line-height: 42px; border-bottom: 1px solid #eee; font-size: 14px; color: #333; overflow: hidden; background-color: #F8F8F8; border-radius: 2px 2px 0 0;}
|
|
.update-ludan-content{padding-left:20px; padding-top:40px; padding-bottom:20px;}
|
|
.update-ludan-content select{border:1px solid #eee; padding:5px; min-width:260px;}
|
|
.update-ludan-win6{padding-left:20px; padding-top:0px; padding-bottom:20px;}
|
|
.update-ludan-footer{text-align:center; padding-bottom:30px;}
|
|
.update-ludan-footer a{display:inline-block; padding:7px 20px; cursor:pointer; border-radius: 2px;}
|
|
.update-ludan-footer #confirm_update_ludan{background:#33A3F6; color:#fff; border-color: #1E9FFF; background-color: #1E9FFF; margin-right:20px;}
|
|
.update-ludan-footer #cancel_update_ludan{border: 1px solid #dedede;}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(360deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
@keyframes second-half-hide {
|
|
0% { opacity: 1; }
|
|
50%, 100% { opacity: 0; }
|
|
}
|
|
@keyframes second-half-show {
|
|
0% { opacity: 0; }
|
|
50%, 100% { opacity: 1; }
|
|
}
|
|
|
|
@-webkit-keyframes bounceIn {
|
|
0% {
|
|
opacity: .8;
|
|
-webkit-transform: scale(0.5);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: scale(1);
|
|
}
|
|
}
|
|
@-moz-keyframes bounceIn {
|
|
0% {
|
|
opacity: .8;
|
|
-moz-transform: scale(0.5);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
-moz-transform: scale(1);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 1366px){
|
|
.section .head .box .list .item{
|
|
font-size: 14px;
|
|
}
|
|
.section .head .box .list .date p{
|
|
width: 160px;
|
|
font-size: 13px;
|
|
}
|
|
.result-box {
|
|
width: 220px;
|
|
margin-left: -110px;
|
|
margin-top: -200px;
|
|
|
|
}
|
|
}
|
|
|