Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 

289 řádky
6.2 KiB

  1. @charset "utf-8";
  2. body {
  3. background-color: #fae78d;
  4. }
  5. *{
  6. -webkit-overflow-scrolling: touch;
  7. }
  8. #share{
  9. position: absolute;
  10. top: 1.2rem;
  11. right: 0;
  12. background-color: #34b202;
  13. border-top-left-radius: 0.13333333rem;
  14. border-bottom-left-radius: 0.13333333rem;
  15. margin-top: 0.48rem;
  16. width: 1.09333333rem;
  17. height: 0.64666667rem;
  18. text-align: center;
  19. line-height: 0.64666667rem;
  20. font-size: 0.32rem;
  21. color: #fff;
  22. z-index: 10;
  23. }
  24. #wrap {
  25. margin-top: -0.01333333rem;
  26. height: 17.8rem;
  27. background-image: url("../image/bg.png");
  28. }
  29. .rule,
  30. .my {
  31. position: relative;
  32. z-index: 3;
  33. margin-top: 0.48rem;
  34. width: 1.09333333rem;
  35. height: 0.74666667rem;
  36. background-color: #ff9d1b;
  37. text-align: center;
  38. line-height: 0.74666667rem;
  39. font-size: 0.32rem;
  40. color: #fff;
  41. }
  42. .rule {
  43. border-top-right-radius: 0.13333333rem;
  44. border-bottom-right-radius: 0.13333333rem;
  45. }
  46. .my {
  47. background-color: #fe5362;
  48. border-top-left-radius: 0.13333333rem;
  49. border-bottom-left-radius: 0.13333333rem;
  50. }
  51. /*游戏区域*/
  52. .main {
  53. position: relative;
  54. width: 100%;
  55. height: 12.98666667rem;
  56. }
  57. .main .caidai {
  58. position: absolute;
  59. left: 50%;
  60. top: 0;
  61. z-index: 3;
  62. margin-left: -4.29333333rem;
  63. width: 8.58666667rem;
  64. height: 11.64rem;
  65. background-image: url("../image/caidai.png");
  66. }
  67. .main .title {
  68. position: relative;
  69. z-index: 2;
  70. width: 100%;
  71. height: 4.18666667rem;
  72. background-image: url("../image/title.png");
  73. }
  74. .main .box {
  75. position: relative;
  76. margin-top: -1.6rem;
  77. width: 100%;
  78. height: 10.42666667rem;
  79. background-image: url("../image/box.png");
  80. }
  81. /*钩子*/
  82. .main .box #hook {
  83. position: absolute;
  84. left: 50%;
  85. top: -2.93333333rem;
  86. z-index: 1;
  87. margin-left: -0.86666667rem;
  88. width: 1.73333333rem;
  89. height: 5.73333333rem;
  90. }
  91. #hook .line {
  92. margin: auto;
  93. width: 0.58666667rem;
  94. height: 4.56rem;
  95. background-image: url("../image/line.png");
  96. }
  97. #hook .left,
  98. #hook .right {
  99. position: absolute;
  100. bottom: 0;
  101. width: 0.74666667rem;
  102. height: 1.34666667rem;
  103. }
  104. #hook .left {
  105. left: 0;
  106. background-image: url("../image/left.png");
  107. -o-transform-origin: right top;
  108. -ms-transform-origin: right top;
  109. -moz-transform-origin: right top;
  110. -webkit-transform-origin: right top;
  111. transform-origin: right top;
  112. transform: rotate(-20deg);
  113. }
  114. #hook .right {
  115. right: 0;
  116. background-image: url("../image/right.png");
  117. -o-transform-origin: left top;
  118. -ms-transform-origin: left top;
  119. -moz-transform-origin: left top;
  120. -webkit-transform-origin: left top;
  121. transform-origin: left top;
  122. -o-transform: rotate(20deg);
  123. -ms-transform: rotate(20deg);
  124. -moz-transform: rotate(20deg);
  125. -webkit-transform: rotate(20deg);
  126. transform: rotate(20deg);
  127. }
  128. #hook .up {
  129. -o-animation: up .5s linear forwards;
  130. -ms-animation: up .5s linear forwards;
  131. -moz-animation: up .5s linear forwards;
  132. -webkit-animation: up .5s linear forwards;
  133. animation: up .5s linear forwards;
  134. }
  135. @keyframes up {
  136. 100% {
  137. -o-transform: rotate(0deg);
  138. -ms-transform: rotate(0deg);
  139. -moz-transform: rotate(0deg);
  140. -webkit-transform: rotate(0deg);
  141. transform: rotate(0deg);
  142. }
  143. }
  144. /*传送带*/
  145. .behind,
  146. .front {
  147. overflow-x: hidden;
  148. position: relative;
  149. left: 50%;
  150. top: 32%;
  151. margin: -1.14666667rem 0 0 -4.13333333rem;
  152. width: 8.26666667rem;
  153. height: 2rem;
  154. background-image: url("../image/behind.png");
  155. background-position: left bottom;
  156. }
  157. .front {
  158. top: 43%;
  159. width: 8.26666667rem;
  160. height: 2.86666667rem;
  161. background-image: url("../image/front.png");
  162. }
  163. .behind ul,
  164. .front ul {
  165. width: 14rem;
  166. }
  167. .front ul {
  168. position: absolute;
  169. right: 0;
  170. }
  171. .behind li {
  172. position: relative;
  173. float: left;
  174. height: 1.4rem;
  175. }
  176. .front li {
  177. position: relative;
  178. float: right;
  179. height: 2.08rem;
  180. }
  181. .behind img {
  182. position: absolute;
  183. width: 1.21333333rem;
  184. height: 1.36rem;
  185. }
  186. .front img {
  187. position: absolute;
  188. right: 0;
  189. width: 1.85333333rem;
  190. height: 2.08rem;
  191. }
  192. .box h3 {
  193. margin: 4.73333333rem auto 0.24rem;
  194. width: 3.81333333rem;
  195. height: 0.69333333rem;
  196. /* background-color: #ff9d1b; */
  197. text-align: center;
  198. line-height: 0.69333333rem;
  199. font-size: 0.26666667rem;
  200. font-weight: normal;
  201. color: #bc5700;
  202. border-radius: 0.34666667rem;
  203. }
  204. /*按钮区域*/
  205. .box-btn {
  206. width: 100%;
  207. height: 1.85333333rem;
  208. }
  209. .box-btn li {
  210. float: left;
  211. }
  212. .box-btn li:nth-child(1) {
  213. width: 2.09333333rem;
  214. height: 1.85333333rem;
  215. background-image: url("../image/coin1.png");
  216. -o-transform-origin: center bottom;
  217. -ms-transform-origin: center bottom;
  218. -moz-transform-origin: center bottom;
  219. -webkit-transform-origin: center bottom;
  220. transform-origin: center bottom;
  221. -o-animation: shak 3s ease-in-out infinite alternate;
  222. -ms-animation: shak 3s ease-in-out infinite alternate;
  223. -moz-animation: shak 3s ease-in-out infinite alternate;
  224. -webkit-animation: shak 3s ease-in-out infinite alternate;
  225. animation: shak 3s ease-in-out infinite alternate;
  226. }
  227. @keyframes shak {
  228. 0%,
  229. 100% {
  230. -o-transform: rotate(0deg);
  231. -ms-transform: rotate(0deg);
  232. -moz-transform: rotate(0deg);
  233. -webkit-transform: rotate(0deg);
  234. transform: rotate(0deg);
  235. }
  236. 20%,
  237. 60% {
  238. -o-transform: rotate(-5deg);
  239. -ms-transform: rotate(-5deg);
  240. -moz-transform: rotate(-5deg);
  241. -webkit-transform: rotate(-5deg);
  242. transform: rotate(-5deg);
  243. }
  244. 40%,
  245. 80% {
  246. -o-transform: rotate(5deg);
  247. -ms-transform: rotate(5deg);
  248. -moz-transform: rotate(5deg);
  249. -webkit-transform: rotate(5deg);
  250. transform: rotate(5deg);
  251. }
  252. }
  253. .box-btn li:nth-child(2) {
  254. margin: 0 0.8rem;
  255. width: 4.08rem;
  256. height: 1.37333333rem;
  257. background-image: url("../image/start.png");
  258. }
  259. .box-btn li:nth-child(3) {
  260. width: 2.2rem;
  261. height: 1.66666667rem;
  262. background-image: url("../image/coin2.png");
  263. }
  264. /*奖品展示*/
  265. .awards {
  266. position: static;
  267. margin: 1.28rem auto;
  268. width: 9.2rem;
  269. height: 2.96rem;
  270. background-image: url("../image/rect.png");
  271. }
  272. .awards .swiper-container {
  273. overflow: hidden;
  274. margin: 0.21333333rem auto;
  275. padding: 0.29333333rem 0;
  276. width: 8.77333333rem;
  277. height: 1.94666667rem;
  278. background-color: #f5ae4f;
  279. box-shadow: 0 0.26666667rem 0.26666667rem rgba(248, 131, 23, 0.7) inset;
  280. border-radius: 0.21333333rem;
  281. }
  282. /*规则弹窗背景色*/
  283. #mask-rule .box-rule {
  284. background-color: #fe5c51;
  285. }
  286. #mask-rule .box-rule .star {
  287. background-image: url("../../common/image/rule/star2.png");
  288. }