.begincard{ position: fixed; top:0; left: 0; width: 100%; height: 100%; background: none; z-index: 999; display: none; pointer-events: none; } .begincard .box{ position: absolute; width: 100%; left: 0; top: 0; opacity: 0; } .begincard .box .list{ float: left; width: 50%; text-align: center; box-sizing: border-box; position: relative; } /* .begincard .box .list:after{ content: ""; width: 90%; height:0; border:1px solid #fff; position: absolute; height: 110%; top: -8%; left: 5%; }*/ .begincard .box .list .item{ display: inline-block; } .begincard .box .list .item:nth-of-type(3){ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); display: none; } .play .begincard .list .item img.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 } .begincard .box .list .text{ color: #fff; font-size: 0.5rem; padding-bottom: 0.2rem; font-weight: bold; text-shadow: 1px 1px 1px #000; opacity: 1; } .begincard .box .player-card .text{ color:#00d2ff; } .begincard .box .banker-card .text{ color: #ff5953; } .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; } /* new */ .play .head-box { color: #000; text-shadow: none; font-size: 0.45rem; background: linear-gradient(to bottom, #A6983B, #F2DB49, #A6983B); height: 1.2rem; line-height: 1.25rem; padding-left: 0.2rem; font-weight: 600; } .play .ask-box { background: url(../img/ask-bg-1.png); -webkit-background-size: 100% 100%; background-size: 100% 100%; }