@charset "utf-8"; @rem:75rem; 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; } body { display: block; position: relative; margin: auto; max-width: 750/@rem; min-width: 320/@rem; font-size: 12/@rem; 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: 1201/@rem; } /*奖品展示*/ .awards{ overflow: hidden; position: absolute; left: 50%; } .awards .swiper-slide{ margin: 5/@rem 20/@rem; padding: 15/@rem; width: 105/@rem; height: 105/@rem; 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: 40/@rem; width: 90%; height: 70%; border-radius: 20/@rem; } #mask-rule .box-rule .star{ position: absolute; left: 50%; top: -100/@rem; margin-left: -130/@rem; width: 259/@rem; height: 87/@rem; } #mask-rule .box-rule h2{ width: 100%; text-align: center; line-height: 34/@rem; font-size: 34/@rem; font-weight: normal; color: #fff; } #mask-rule .box-rule h2::before,#mask-rule .box-rule h2::after{ display: inline-block; content: ""; width: 18/@rem; height: 18/@rem; background-color: #fff; border-radius: 50%; } #mask-rule .box-rule h2::before{ margin-right: 24/@rem; } #mask-rule .box-rule h2::after{ margin-left: 24/@rem; } #mask-rule #close-rule{ position: absolute; right: 34/@rem; top: 38/@rem; width: 40/@rem; height: 40/@rem; background-image: url("../image/rule/close.png"); } /*内容盒子*/ #mask-rule .con{ overflow: auto; position: relative; margin: 40/@rem auto; padding-right: 15/@rem; width: 580/@rem; height: 82%; line-height: 48/@rem; font-size: 26/@rem; 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: 600/@rem; height: 510/@rem; margin: -260/@rem 0 0 -300/@rem; -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: -25/@rem; width: 100%; height: 335/@rem; background-image: url("../image/redPack/top.png"); } .winning .red-body{ position: relative; top: -160/@rem; z-index: 2; width: 100%; height: 360/@rem; background-image: url("../image/redPack/bottom.png"); } .winning #card{ position: absolute; left: 50%; top: 50%; z-index: 1; margin-left: -240/@rem; margin-top: -80/@rem; width: 80%; height: 320/@rem; 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: 10/@rem auto; width: 92%; height: 290/@rem; 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:-240/@rem; } } .winning .btn{ position: absolute; left: 50%; bottom: 10%; z-index: 2; width: 364/@rem; height: 71/@rem; margin-left: -182/@rem; 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: 0/@rem; top: -80/@rem; z-index: 10; width: 64/@rem; height: 64/@rem; 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); } }