@charset "utf-8"; body { background-color: #fae78d; } *{ -webkit-overflow-scrolling: touch; } #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.64666667rem; text-align: center; line-height: 0.64666667rem; font-size: 0.32rem; color: #fff; z-index: 10; } #wrap { margin-top: -0.01333333rem; height: 17.8rem; background-image: url("../image/bg.png"); } .rule, .my { position: relative; z-index: 3; 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 { position: relative; width: 100%; height: 12.98666667rem; } .main .caidai { position: absolute; left: 50%; top: 0; z-index: 3; margin-left: -4.29333333rem; width: 8.58666667rem; height: 11.64rem; background-image: url("../image/caidai.png"); } .main .title { position: relative; z-index: 2; width: 100%; height: 4.18666667rem; background-image: url("../image/title.png"); } .main .box { position: relative; margin-top: -1.6rem; width: 100%; height: 10.42666667rem; background-image: url("../image/box.png"); } /*钩子*/ .main .box #hook { position: absolute; left: 50%; top: -2.93333333rem; z-index: 1; margin-left: -0.86666667rem; width: 1.73333333rem; height: 5.73333333rem; } #hook .line { margin: auto; width: 0.58666667rem; height: 4.56rem; background-image: url("../image/line.png"); } #hook .left, #hook .right { position: absolute; bottom: 0; width: 0.74666667rem; height: 1.34666667rem; } #hook .left { left: 0; background-image: url("../image/left.png"); -o-transform-origin: right top; -ms-transform-origin: right top; -moz-transform-origin: right top; -webkit-transform-origin: right top; transform-origin: right top; transform: rotate(-20deg); } #hook .right { right: 0; background-image: url("../image/right.png"); -o-transform-origin: left top; -ms-transform-origin: left top; -moz-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; -o-transform: rotate(20deg); -ms-transform: rotate(20deg); -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } #hook .up { -o-animation: up .5s linear forwards; -ms-animation: up .5s linear forwards; -moz-animation: up .5s linear forwards; -webkit-animation: up .5s linear forwards; animation: up .5s linear forwards; } @keyframes up { 100% { -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /*传送带*/ .behind, .front { overflow-x: hidden; position: relative; left: 50%; top: 32%; margin: -1.14666667rem 0 0 -4.13333333rem; width: 8.26666667rem; height: 2rem; background-image: url("../image/behind.png"); background-position: left bottom; } .front { top: 43%; width: 8.26666667rem; height: 2.86666667rem; background-image: url("../image/front.png"); } .behind ul, .front ul { width: 14rem; } .front ul { position: absolute; right: 0; } .behind li { position: relative; float: left; height: 1.4rem; } .front li { position: relative; float: right; height: 2.08rem; } .behind img { position: absolute; width: 1.21333333rem; height: 1.36rem; } .front img { position: absolute; right: 0; width: 1.85333333rem; height: 2.08rem; } .box h3 { margin: 4.73333333rem auto 0.24rem; width: 3.81333333rem; height: 0.69333333rem; /* background-color: #ff9d1b; */ text-align: center; line-height: 0.69333333rem; font-size: 0.26666667rem; font-weight: normal; color: #bc5700; border-radius: 0.34666667rem; } /*按钮区域*/ .box-btn { width: 100%; height: 1.85333333rem; } .box-btn li { float: left; } .box-btn li:nth-child(1) { width: 2.09333333rem; height: 1.85333333rem; background-image: url("../image/coin1.png"); -o-transform-origin: center bottom; -ms-transform-origin: center bottom; -moz-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; -o-animation: shak 3s ease-in-out infinite alternate; -ms-animation: shak 3s ease-in-out infinite alternate; -moz-animation: shak 3s ease-in-out infinite alternate; -webkit-animation: shak 3s ease-in-out infinite alternate; animation: shak 3s ease-in-out infinite alternate; } @keyframes shak { 0%, 100% { -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 20%, 60% { -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 40%, 80% { -o-transform: rotate(5deg); -ms-transform: rotate(5deg); -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } } .box-btn li:nth-child(2) { margin: 0 0.8rem; width: 4.08rem; height: 1.37333333rem; background-image: url("../image/start.png"); } .box-btn li:nth-child(3) { width: 2.2rem; height: 1.66666667rem; background-image: url("../image/coin2.png"); } /*奖品展示*/ .awards { position: static; margin: 1.28rem auto; width: 9.2rem; height: 2.96rem; background-image: url("../image/rect.png"); } .awards .swiper-container { overflow: hidden; margin: 0.21333333rem auto; padding: 0.29333333rem 0; width: 8.77333333rem; height: 1.94666667rem; background-color: #f5ae4f; box-shadow: 0 0.26666667rem 0.26666667rem rgba(248, 131, 23, 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"); }