@charset "utf-8"; body { background: #50009f; } #myWin{ position: absolute; top: 0; right: 0; background-color: #fe5362; border-top-left-radius: 0.13333333rem; border-bottom-left-radius: 0.13333333rem; margin-top: 0.48rem; width: 1.09333333rem; height: 0.74666667rem; text-align: center; line-height: 0.74666667rem; font-size: 0.32rem; color: #fff; } #share{ position: absolute; top: 1.2rem; right: 0; background-color: #34b202; border-top-left-radius: 0.13333333rem; border-bottom-left-radius: 0.13333333rem; margin-top: 0.48rem; width: 1.09333333rem; height: 0.74666667rem; text-align: center; line-height: 0.74666667rem; font-size: 0.32rem; color: #fff; } #wrap { background-image: url("../image/bg.jpg"); height: auto; } .rule, .my { margin-top: 0.48rem; width: 1.09333333rem; height: 0.74666667rem; background-color: #ff9d1b; text-align: center; line-height: 0.74666667rem; font-size: 0.32rem; color: #fff; } .rule { border-top-right-radius: 0.13333333rem; border-bottom-right-radius: 0.13333333rem; } .my { background-color: #fe5362; border-top-left-radius: 0.13333333rem; border-bottom-left-radius: 0.13333333rem; } /*主体*/ .main { margin-top: 4.4rem; width: 100%; } .main h2 { margin: 0.2rem auto 0; width: 4rem; height: 0.69333333rem; /*background-color: #fee405;*/ text-align: center; line-height: 0.69333333rem; font-size: 0.26666667rem; font-weight: normal; color: #bc5700; border-radius: 0.34666667rem; } /*游戏区域*/ .box { position: relative; width: 100%; height: 7.2rem; } .box li { position: absolute; left: 6.82666667rem; top: 3.57333333rem; width: 2.73333333rem; height: 3.57333333rem; background-image: url("../image/card1.png"); -o-transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; transition: .3s; } /*卡牌摆动动画*/ .box li.active { background-image: url("../image/card2.png"); -o-animation: shaking 0.5s ease-in-out; -ms-animation: shaking 0.5s ease-in-out; -moz-animation: shaking 0.5s ease-in-out; -webkit-animation: shaking 0.5s ease-in-out; animation: shaking 0.5s ease-in-out; } @keyframes shaking { 0%, 100% { -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 33% { -o-transform: rotateY(-20deg); -ms-transform: rotateY(-20deg); -moz-transform: rotateY(-20deg); -webkit-transform: rotateY(-20deg); transform: rotateY(-20deg); } 66% { -o-transform: rotateY(20deg); -ms-transform: rotateY(20deg); -moz-transform: rotateY(20deg); -webkit-transform: rotateY(20deg); transform: rotateY(20deg); } } /*卡牌翻开动画*/ .box li.open-card { left: 3.64rem !important; top: 0 !important; z-index: 10; -o-transform: scale(1.5); -ms-transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5); -o-animation: openCard .5s .5s linear forwards; -ms-animation: openCard .5s .5s linear forwards; -moz-animation: openCard .5s .5s linear forwards; -webkit-animation: openCard .5s .5s linear forwards; animation: openCard .5s .5s linear forwards; } @keyframes openCard { 10%, 30%, 50% { -o-transform: scale(1.5) translateX(-10px); -ms-transform: scale(1.5) translateX(-10px); -moz-transform: scale(1.5) translateX(-10px); -webkit-transform: scale(1.5) translateX-(10px); transform: scale(1.5) translateX(-10px); } 20%, 40%, 60% { -o-transform: scale(1.5) translateX(10px); -ms-transform: scale(1.5) translateX(10px); -moz-transform: scale(1.5) translateX(10px); -webkit-transform: scale(1.5) translateX(10px); transform: scale(1.5) translateX(10px); } 100% { -o-transform: scale(1.5) translateX(90deg); -ms-transform: scale(1.5) translateX(90deg); -moz-transform: scale(1.5) translateX(90deg); -webkit-transform: scale(1.5) translateX(90deg); transform: scale(1.5) rotateY(90deg); } } /*图案*/ .box li img { display: block; margin: 0.46666667rem auto; width: 1.73333333rem; height: 2.53333333rem; } /*翻牌遮罩*/ #mask-card { display: none; position: fixed; z-index: 1; width: 100%; height: 100%; /* background-color: rgba(0, 0, 0, 0.85); */ } /*奖品展示*/ .awards { position: static; margin: 0.4rem auto; width: 8.4rem; height: 1.93333333rem; background-color: #cb59fe; box-shadow: 0 0.26666667rem 0.26666667rem rgba(135, 25, 187, 0.7) inset; border-radius: 0.21333333rem; } /*规则弹窗背景色*/ #mask-rule .box-rule { background-color: #fe5c51; } #mask-rule .box-rule .star { background-image: url("../../common/image/rule/star2.png"); }