qianduo/games_h5/css/fanpai.css

body {
    width: 100%;
    height: 100%;
    background: #fce379;
    /* overflow-x: hidden; */
    padding: 0 .1rem;
}
.back1 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.rule_content {
    display: none;
    z-index: 2;
}
img {
    display: block;
    margin: 0 auto;
    -webkit-transition: all 5s ease-in-out;
    transition: all 5s ease-in-out;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-animation: move 2s 6s ease-in-out forwards;
            animation: move 2s 6s ease-in-out forwards;
}
.rule {
    color: #3eb1fc;
    background: #fff;
    z-index: 1;
}
.main {
    width: 3.23rem;
    height: 3.33rem;
    padding-bottom: .075rem;
    border: .01rem solid transparent;
    clear: both;
    margin: 1.27rem auto;
    margin-top: 1.91rem;
    padding: .7rem .26rem;
    position: relative;
}
.main li {
    width: .79rem;
    height: 1.08rem;
    line-height: 1.08rem;
    text-align: center;
    float: left;
    margin-right: .15rem;
    margin-bottom: .15rem;
    background: #FAD22C;
    border-radius: .05rem;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    background-image: url("../img/cen.png");
    background-size: 100% 100%;
    position: relative;
}
.main li:nth-child(3n) {
    margin-right: 0;
}
.active {
    width: 100%;
    height: 100%;
    position: absolute;
    top: .64rem;
    left: 0;
}
.active li {
    position: absolute;
    top: 1.98rem;
    left: .53rem;
    width: .79rem;
    height: 1.08rem;
    line-height: 1.08rem;
    text-align: center;
    float: left;
    background: #FAD22C;
    border-radius: .05rem;
    background-image: url("../img/cen.png");
    background-size: 100% 100%;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}
.active li:nth-child(2) {
    left: 1.47rem;
}
.active li:nth-child(3) {
    left: 2.41rem;
}
.active li:nth-child(4) {
    top: 3.21rem;
}
.active li:nth-child(5) {
    left: 1.47rem;
    top: 3.21rem;
}
.active li:nth-child(6) {
    left: 2.41rem;
    top: 3.21rem;
}
.active li.animate {
    z-index: 2;
    top: 1.5rem;
    left: 50%;
    margin-left: -.395rem;
    -webkit-transition:all 1s;
    transition:all 1s;
}
.active li.rotate {
    -webkit-transform: rotateY(720deg);
    transform: rotateY(720deg);
    -webkit-transition: all 3s;
    transition: all 3s;
}
.active li.scale {
    top: 50%;
    left: 50%;
    margin-left: -.395rem;
    margin-top: -1.4rem;
    -webkit-transform: scale(1.5,1.5);
            transform: scale(1.5,1.5);
    -webkit-transition: all 2s;
    transition: all 2s;
}
.all {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: none;
}
.rule_content {
    background-image: url("../img/rule2.png");
}
.rule_content button {
    background: #4FB9FF;
}
.lastTime {
    width: 1.2rem;
    height: .2rem;
    color: #10ABFF;
    text-align: center;
    position: absolute;
    top: 1.8rem;
    left: 50%;
    transform: translate(-.7rem,0);
}

.toast {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
}
.toast>div {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    background-size: 100% 100%;
}
.mask1 {
    width: 2.23rem;
    height: 2.23rem;
    background-image: url("../img/op.png");
    animation: animation1 3s infinite;
    margin-left: -1.165rem;
    margin-top: -1.165rem;
}
.gift1 {
    width: 1.59rem;
    height: 1.59rem;
    background-image: url("../img/bigGift.png");
    margin-left: -.795rem;
    margin-top: -.795rem;
}
.lastTime img {
    width: 65%;
    height: 100%;
    float: left;
}
.lastTime span {
    line-height: .24rem;
    display: inline-block;
    transform: rotate(10deg);
}