@charset "utf-8"; body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, input, select, button, textarea, table, th, td, a, span, canvas { margin: 0; padding: 0; background: no-repeat center / contain; cursor: default; } *{ -webkit-overflow-scrolling: touch; } body { display: block; position: relative; margin: auto; max-width: 10rem; min-width: 4.26666667rem; font-size: 0.16rem; font-family: "Microsoft Yahei", "Arial", sans-serif; } ul, ol { list-style: none; } img { border: none; } a { outline: none; text-decoration: none; color: inherit; } a:hover { text-decoration: none; } input { outline: none; } .block { display: block; } .none { display: none; } .r { position: relative; } .a { position: absolute; } .fl { float: left; } .fr { float: right; } .clearfix:after { content: ""; clear: both; display: block; visibility: hidden; height: 0; } /*H5游戏共用类*/ #wrap { overflow: hidden; position: relative; width: 100%; height: 16.01333333rem; } /*奖品展示*/ .awards { overflow: hidden; position: absolute; left: 50%; } .awards .swiper-slide { margin: 0.06666667rem 0.26666667rem; padding: 0.4rem; width: 1rem; height: 1rem; background-image: url("../image/icon/drag/drag_box.png"); } .awards .swiper-slide img { width: inherit; height: inherit; } /*规则弹窗*/ #mask-rule, #mask { display: none; position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); } #mask-rule .box-rule { position: relative; margin: 20% auto; padding-top: 0.53333333rem; width: 90%; height: 70%; border-radius: 0.26666667rem; } #mask-rule .box-rule .star { position: absolute; left: 50%; top: -1.33333333rem; margin-left: -1.73333333rem; width: 3.45333333rem; height: 1.16rem; } #mask-rule .box-rule h2 { width: 100%; text-align: center; line-height: 0.45333333rem; font-size: 0.45333333rem; font-weight: normal; color: #fff; } #mask-rule .box-rule h2::before, #mask-rule .box-rule h2::after { display: inline-block; content: ""; width: 0.24rem; height: 0.24rem; background-color: #fff; border-radius: 50%; } #mask-rule .box-rule h2::before { margin-right: 0.32rem; } #mask-rule .box-rule h2::after { margin-left: 0.32rem; } #mask-rule #close-rule { position: absolute; right: 0.45333333rem; top: 0.50666667rem; width: 0.53333333rem; height: 0.53333333rem; background-image: url("../image/rule/close.png"); } /*内容盒子*/ #mask-rule .con { overflow: auto; position: relative; margin: 0.53333333rem auto; padding-right: 0.2rem; width: 7.73333333rem; height: 82%; line-height: 0.64rem; font-size: 0.34666667rem; color: #fff; } #mask-rule .con .text { position: absolute; top: 0; left: 0; width: inherit; height: auto; } /*中奖提示*/ #mask { display: none; position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); } #mask .blin { width: 100%; height: 100%; background-image: url("../image/redPack/gold.png"); -o-animation: circle 10s linear infinite; -ms-animation: circle 10s linear infinite; -moz-animation: circle 10s linear infinite; -webkit-animation: circle 10s linear infinite; animation: circle 10s linear infinite; } @keyframes circle { 0% { -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } #mask .caidai { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-image: url("../image/redPack/dianzhui.png"); -o-transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } #mask .winning { position: absolute; left: 50%; top: 50%; z-index: 1; width: 8rem; height: 6.8rem; margin: -3.46666667rem 0 0 -4rem; -o-transform: scale(0.1); -ms-transform: scale(0.1); -moz-transform: scale(0.1); -webkit-transform: scale(0.1); transform: scale(0.1); } #mask .reback { -o-animation: reback .5s linear forwards; -ms-animation: reback .5s linear forwards; -moz-animation: reback .5s linear forwards; -webkit-animation: reback .5s linear forwards; animation: reback .5s linear forwards; } @keyframes reback { 100% { -o-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } .winning .red-head { position: relative; top: -0.33333333rem; width: 100%; height: 4.46666667rem; background-image: url("../image/redPack/top.png"); } .winning .red-body { position: relative; top: -2.33333333rem; z-index: 2; width: 100%; height: 4.8rem; background-image: url("../image/redPack/bottom.png"); } .winning .red-body p{ width: 60%; margin: 0 auto; text-align: center; padding-top: 2rem; font-size: 0.34rem; color: #ffee37; } .winning #card { position: absolute; left: 50%; top: 50%; z-index: 1; margin-left: -3.2rem; margin-top: -1.06666667rem; width: 80%; height: 4.26666667rem; background-image: url("../image/redPack/middle.png"); -o-transition: top .5s; -ms-transition: top .5s; -moz-transition: top .5s; -webkit-transition: top .5s; transition: top .5s; } #card .win { display: block; margin: 0.13333333rem auto; width: 92%; height: 3.86666667rem; background-image: url("../image/prize/prize2.png"); } .winning .pull { -o-animation: card .5s linear forwards; -ms-animation: card .5s linear forwards; -moz-animation: card .5s linear forwards; -webkit-animation: card .5s linear forwards; animation: card .5s linear forwards; } @keyframes card { 100% { margin-top: -3.2rem; } } .winning .btn { position: absolute; left: 50%; bottom: 10%; z-index: 2; width: 4.85333333rem; height: 0.94666667rem; margin-left: -2.42666667rem; width: 4.85333333rem; font-size: 0.4rem; line-height: 0.94666667rem; color: #fd4859; text-align: center; background-image: url("../image/redPack/button.png"); -o-animation: shake .5s 2 linear alternate; -ms-animation: shake .5s 2 linear alternate; -moz-animation: shake .5s 2 linear alternate; -webkit-animation: shake .5s 2 linear alternate; animation: shake .5s 2 linear alternate; } @keyframes shake { 50% { -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -o-transform: rotate(5deg); -ms-transform: rotate(5deg); -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } } #close { opacity: 0; position: absolute; right: 0rem; top: -1.06666667rem; z-index: 10; width: 0.85333333rem; height: 0.85333333rem; background-image: url("../image/redPack/close.png"); -o-animation: fadein .5s .5s linear forwards; -ms-animation: fadein .5s .5s linear forwards; -moz-animation: fadein .5s .5s linear forwards; -webkit-animation: fadein .5s .5s linear forwards; animation: fadein .5s .5s linear forwards; } @keyframes fadein { 100% { opacity: 1; -o-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 点击分享弹出的弹框样式 */ .b1{ position:fixed; width:100%; height:100%; top:0px; background:rgba(0,0,0,0.9); overflow: hidden; z-index: 100; display: none; } .t_w{ display: none; position: fixed; height: 100%; left: 0%; top: 0%; width: 100%; background: url(../image/mengceng.png) no-repeat; background-size: 100%; z-index: 1000; padding: 0.8rem 0.4rem; box-sizing: border-box; } .span-text{ font-size: 0.4rem; line-height: 0.8rem, } .span-blue{ font-size: 0.4rem; color: mediumorchid; margin: 0 0.2rem; line-height: 0.8rem; } .s-close{ display: block; position: absolute; bottom: -1.3rem; z-index: 500; width: 1rem; left: 50%; margin-left: -0.6rem; overflow: hidden; } #gotoindex{ position: absolute; top: 2.4rem; right: 0; background-color: #7184E2; 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; } #warnning-box-bg{ height: 100vh; width: 100%; position: fixed; z-index: 100; opacity: 0.7; background: #000; top: 0; left: 0; display: none; } #warnning-box{ width: 70%; background: #fff; z-index: 200; position: fixed; top: 50%; margin-top: -2rem; left: 50%; margin-left: -35%; border-radius: 0.15rem; padding: 0 0.3rem; padding-top: 0.6rem; box-sizing: border-box; display: none; } #w-title{ font-size: 0.26rem; line-height: 0.32rem; color: #000; } #w-button{ font-size: 0.26rem; line-height: 0.6rem; color: #000; width: 1.2rem; height: 0.6rem; margin: 0.4rem 0 0.2rem; background: #50009f; border-radius: 0.15rem; text-align: center; float: right; color: #fff; } #w-cancel{ font-size: 0.26rem; line-height: 0.6rem; color: #000; width: 1.2rem; height: 0.6rem; margin: 0.4rem 0 0.3rem 0.3rem; background: #50009f; border-radius: 0.15rem; text-align: center; float: right; color: #fff; }