|
- @charset "utf-8";
- @rem:75rem;
-
- body{
- background-color: #feefab;
- }
-
- #wrap {
- margin-top: -1/@rem;
- height: 1335/@rem;
- background-image: url("../image/bg.png");
- }
-
- .rule, .my {
- position: relative;
- z-index: 3;
- margin-top: 36/@rem;
- width: 82/@rem;
- height: 56/@rem;
- background-color: #ff9d1b;
- text-align: center;
- line-height: 56/@rem;
- font-size: 24/@rem;
- color: #fff;
- }
-
- .rule {
- border-top-right-radius: 10/@rem;
- border-bottom-right-radius: 10/@rem;
- }
-
- .my {
- background-color: #fe5362;
- border-top-left-radius: 10/@rem;
- border-bottom-left-radius: 10/@rem;
- }
-
- /*游戏区域*/
- .main{
- position: relative;
- width: 100%;
- height: 974/@rem;
- }
-
- .main .caidai{
- position: absolute;
- left: 50%;
- top: 0;
- z-index: 3;
- margin-left: -322/@rem;
- width: 644/@rem;
- height: 873/@rem;
- background-image: url("../image/caidai.png");
- }
-
- .main .title{
- position: relative;
- z-index: 2;
- width: 100%;
- height: 314/@rem;
- background-image: url("../image/title.png");
- }
-
- .main .box{
- position: relative;
- margin-top: -120/@rem;
- width: 100%;
- height: 782/@rem;
- background-image: url("../image/box.png");
- }
-
- /*钩子*/
- .main .box #hook{
- position: absolute;
- left: 50%;
- top: -220/@rem;
- z-index: 1;
- margin-left: -65/@rem;
- width: 130/@rem;
- height: 430/@rem;
- }
-
- #hook .line{
- margin: auto;
- width: 44/@rem;
- height: 342/@rem;
- background-image: url("../image/line.png");
- }
-
- #hook .left,#hook .right{
- position: absolute;
- bottom: 0;
- width: 56/@rem;
- height: 101/@rem;
- }
-
- #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: -86/@rem 0 0 -310/@rem;
- width: 620/@rem;
- height: 150/@rem;
- background-image: url("../image/behind.png");
- background-position: left bottom;
- }
-
- .front{
- top: 43%;
- width: 620/@rem;
- height: 215/@rem;
- 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: 105/@rem;
- }
-
- .front li{
- position: relative;
- float: right;
- height: 156/@rem;
- }
-
- .behind img{
- position: absolute;
- width: 91/@rem;
- height: 102/@rem;
- }
-
- .front img{
- position: absolute;
- right: 0;
- width: 139/@rem;
- height: 156/@rem;
- }
-
- .box h3{
- margin: 355/@rem auto 18/@rem;
- width: 286/@rem;
- height: 52/@rem;
- background-color: #ff9d1b;
- text-align: center;
- line-height: 52/@rem;
- font-size: 20/@rem;
- font-weight: normal;
- color: #bc5700;
- border-radius: 26/@rem;
- }
-
- /*按钮区域*/
- .box-btn{
- width: 100%;
- height: 139/@rem;
- }
-
- .box-btn li{
- float: left;
- }
-
- .box-btn li:nth-child(1){
- width: 157/@rem;
- height: 139/@rem;
- 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 60/@rem;
- width: 306/@rem;
- height: 103/@rem;
- background-image: url("../image/start.png");
- }
-
- .box-btn li:nth-child(3){
- width: 165/@rem;
- height: 125/@rem;
- background-image: url("../image/coin2.png");
- }
-
- /*奖品展示*/
- .awards {
- position: static;
- margin: 96/@rem auto;
- width: 690/@rem;
- height: 222/@rem;
- background-image: url("../image/rect.png");
- }
-
- .awards .swiper-container{
- overflow: hidden;
- margin: 16/@rem auto;
- padding: 22/@rem 0;
- width: 658/@rem;
- height: 146/@rem;
- background-color: #f5ae4f;
- box-shadow: 0 20/@rem 20/@rem rgba(248, 131, 23, .7) inset;
- border-radius: 16/@rem;
- }
-
- /*规则弹窗背景色*/
- #mask-rule .box-rule{
- background-color: #fe5c51;
- }
-
- #mask-rule .box-rule .star{
- background-image: url("../../common/image/rule/star2.png");
- }
-
|