Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 

190 строки
4.3 KiB

  1. @charset "utf-8";
  2. @rem:75rem;
  3. body{
  4. background: #50009f;
  5. }
  6. #wrap {
  7. background-image: url("../image/bg.png");
  8. }
  9. .rule, .my {
  10. margin-top: 36/@rem;
  11. width: 82/@rem;
  12. height: 56/@rem;
  13. background-color: #ff9d1b;
  14. text-align: center;
  15. line-height: 56/@rem;
  16. font-size: 24/@rem;
  17. color: #fff;
  18. }
  19. .rule {
  20. border-top-right-radius: 10/@rem;
  21. border-bottom-right-radius: 10/@rem;
  22. }
  23. .my {
  24. background-color: #fe5362;
  25. border-top-left-radius: 10/@rem;
  26. border-bottom-left-radius: 10/@rem;
  27. }
  28. /*主体*/
  29. .main {
  30. position: absolute;
  31. left: 0;
  32. bottom: 0;
  33. width: 100%;
  34. height: 820/@rem;
  35. }
  36. .main h2 {
  37. margin: 15/@rem auto 0;
  38. width: 300/@rem;
  39. height: 52/@rem;
  40. background-color: #fee405;
  41. text-align: center;
  42. line-height: 52/@rem;
  43. font-size: 20/@rem;
  44. font-weight: normal;
  45. color: #bc5700;
  46. border-radius: 26/@rem;
  47. }
  48. /*游戏区域*/
  49. .box {
  50. position: relative;
  51. width: 100%;
  52. height: 540/@rem;
  53. }
  54. .box li {
  55. position: absolute;
  56. left: 512/@rem;
  57. top: 268/@rem;
  58. width: 205/@rem;
  59. height: 268/@rem;
  60. background-image: url("../image/card1.png");
  61. -o-transition: .3s;
  62. -ms-transition: .3s;
  63. -moz-transition: .3s;
  64. -webkit-transition: .3s;
  65. transition: .3s;
  66. }
  67. /*卡牌摆动动画*/
  68. .box li.active {
  69. background-image: url("../image/card2.png");
  70. -o-animation: shaking .5s ease-in-out;
  71. -ms-animation: shaking .5s ease-in-out;
  72. -moz-animation: shaking .5s ease-in-out;
  73. -webkit-animation: shaking .5s ease-in-out;
  74. animation: shaking .5s ease-in-out;
  75. }
  76. @keyframes shaking{
  77. 0%,100%{
  78. -o-transform: rotateY(0deg);
  79. -ms-transform: rotateY(0deg);
  80. -moz-transform: rotateY(0deg);
  81. -webkit-transform: rotateY(0deg);
  82. transform: rotateY(0deg);
  83. }
  84. 33%{
  85. -o-transform: rotateY(-20deg);
  86. -ms-transform: rotateY(-20deg);
  87. -moz-transform: rotateY(-20deg);
  88. -webkit-transform: rotateY(-20deg);
  89. transform: rotateY(-20deg);
  90. }
  91. 66%{
  92. -o-transform: rotateY(20deg);
  93. -ms-transform: rotateY(20deg);
  94. -moz-transform: rotateY(20deg);
  95. -webkit-transform: rotateY(20deg);
  96. transform: rotateY(20deg);
  97. }
  98. }
  99. /*卡牌翻开动画*/
  100. .box li.open-card {
  101. left: 273/@rem !important;
  102. top: 0 !important;
  103. z-index: 10;
  104. -o-transform: scale(1.5);
  105. -ms-transform: scale(1.5);
  106. -moz-transform: scale(1.5);
  107. -webkit-transform: scale(1.5);
  108. transform: scale(1.5);
  109. -o-animation: openCard .5s .5s linear forwards;
  110. -ms-animation: openCard .5s .5s linear forwards;
  111. -moz-animation: openCard .5s .5s linear forwards;
  112. -webkit-animation: openCard .5s .5s linear forwards;
  113. animation: openCard .5s .5s linear forwards;
  114. }
  115. @keyframes openCard{
  116. 10%,30%,50%{
  117. -o-transform: scale(1.5) translateX(-10px);
  118. -ms-transform: scale(1.5) translateX(-10px);
  119. -moz-transform: scale(1.5) translateX(-10px);
  120. -webkit-transform: scale(1.5) translateX-(10px);
  121. transform: scale(1.5) translateX(-10px);
  122. }
  123. 20%,40%,60%{
  124. -o-transform: scale(1.5) translateX(10px);
  125. -ms-transform: scale(1.5) translateX(10px);
  126. -moz-transform: scale(1.5) translateX(10px);
  127. -webkit-transform: scale(1.5) translateX(10px);
  128. transform: scale(1.5) translateX(10px);
  129. }
  130. 100%{
  131. -o-transform: scale(1.5) translateX(90deg);
  132. -ms-transform: scale(1.5) translateX(90deg);
  133. -moz-transform: scale(1.5) translateX(90deg);
  134. -webkit-transform: scale(1.5) translateX(90deg);
  135. transform: scale(1.5) rotateY(90deg);
  136. }
  137. }
  138. /*图案*/
  139. .box li img {
  140. display: block;
  141. margin: 35/@rem auto;
  142. width: 130/@rem;
  143. height: 190/@rem;
  144. }
  145. /*翻牌遮罩*/
  146. #mask-card{
  147. display: none;
  148. position: fixed;
  149. z-index: 1;
  150. width: 100%;
  151. height: 100%;
  152. background-color: rgba(0, 0, 0, .85)
  153. }
  154. /*奖品展示*/
  155. .awards {
  156. position: static;
  157. margin: 30/@rem auto;
  158. width: 630/@rem;
  159. height: 145/@rem;
  160. background-color: #cb59fe;
  161. box-shadow: 0 20/@rem 20/@rem rgba(135, 25, 187, .7) inset;
  162. border-radius: 16/@rem;
  163. }
  164. /*规则弹窗背景色*/
  165. #mask-rule .box-rule{
  166. background-color: #fe5c51;
  167. }
  168. #mask-rule .box-rule .star{
  169. background-image: url("../../common/image/rule/star2.png");
  170. }