You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

203 lines
4.7 KiB

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