Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 

398 wiersze
7.7 KiB

  1. @charset "utf-8";
  2. @rem:75rem;
  3. body, div, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, input, select, button, textarea, table, th, td,a,span,canvas{
  4. margin: 0;
  5. padding: 0;
  6. background: no-repeat center/contain;
  7. cursor: default;
  8. }
  9. body {
  10. display: block;
  11. position: relative;
  12. margin: auto;
  13. max-width: 750/@rem;
  14. min-width: 320/@rem;
  15. font-size: 12/@rem;
  16. font-family: "Microsoft Yahei", "Arial", sans-serif;
  17. }
  18. ul, ol {
  19. list-style: none;
  20. }
  21. img {
  22. border: none;
  23. }
  24. a {
  25. outline: none;
  26. text-decoration: none;
  27. color: inherit;
  28. }
  29. a:hover {
  30. text-decoration: none;
  31. }
  32. input {
  33. outline: none;
  34. }
  35. .block {
  36. display: block;
  37. }
  38. .none {
  39. display: none;
  40. }
  41. .r {
  42. position: relative;
  43. }
  44. .a {
  45. position: absolute;
  46. }
  47. .fl {
  48. float: left;
  49. }
  50. .fr {
  51. float: right;
  52. }
  53. .clearfix:after {
  54. content: "";
  55. clear: both;
  56. display: block;
  57. visibility: hidden;
  58. height: 0;
  59. }
  60. /*H5游戏共用类*/
  61. #wrap {
  62. overflow: hidden;
  63. position: relative;
  64. width: 100%;
  65. height: 1201/@rem;
  66. }
  67. /*奖品展示*/
  68. .awards{
  69. overflow: hidden;
  70. position: absolute;
  71. left: 50%;
  72. }
  73. .awards .swiper-slide{
  74. margin: 5/@rem 20/@rem;
  75. padding: 15/@rem;
  76. width: 105/@rem;
  77. height: 105/@rem;
  78. background-image: url("../image/icon/drag/drag_box.png");
  79. }
  80. .awards .swiper-slide img {
  81. width: inherit;
  82. height: inherit;
  83. }
  84. /*规则弹窗*/
  85. #mask-rule,#mask{
  86. display: none;
  87. position: fixed;
  88. left: 0;
  89. top: 0;
  90. z-index: 10;
  91. width: 100%;
  92. height: 100%;
  93. background-color: rgba(0, 0, 0, 0.85);
  94. }
  95. #mask-rule .box-rule{
  96. position: relative;
  97. margin: 20% auto;
  98. padding-top: 40/@rem;
  99. width: 90%;
  100. height: 70%;
  101. border-radius: 20/@rem;
  102. }
  103. #mask-rule .box-rule .star{
  104. position: absolute;
  105. left: 50%;
  106. top: -100/@rem;
  107. margin-left: -130/@rem;
  108. width: 259/@rem;
  109. height: 87/@rem;
  110. }
  111. #mask-rule .box-rule h2{
  112. width: 100%;
  113. text-align: center;
  114. line-height: 34/@rem;
  115. font-size: 34/@rem;
  116. font-weight: normal;
  117. color: #fff;
  118. }
  119. #mask-rule .box-rule h2::before,#mask-rule .box-rule h2::after{
  120. display: inline-block;
  121. content: "";
  122. width: 18/@rem;
  123. height: 18/@rem;
  124. background-color: #fff;
  125. border-radius: 50%;
  126. }
  127. #mask-rule .box-rule h2::before{
  128. margin-right: 24/@rem;
  129. }
  130. #mask-rule .box-rule h2::after{
  131. margin-left: 24/@rem;
  132. }
  133. #mask-rule #close-rule{
  134. position: absolute;
  135. right: 34/@rem;
  136. top: 38/@rem;
  137. width: 40/@rem;
  138. height: 40/@rem;
  139. background-image: url("../image/rule/close.png");
  140. }
  141. /*内容盒子*/
  142. #mask-rule .con{
  143. overflow: auto;
  144. position: relative;
  145. margin: 40/@rem auto;
  146. padding-right: 15/@rem;
  147. width: 580/@rem;
  148. height: 82%;
  149. line-height: 48/@rem;
  150. font-size: 26/@rem;
  151. color: #fff;
  152. }
  153. #mask-rule .con .text{
  154. position: absolute;
  155. top: 0;
  156. left: 0;
  157. width: inherit;
  158. height: auto;
  159. }
  160. /*中奖提示*/
  161. #mask {
  162. display: none;
  163. position: fixed;
  164. left: 0;
  165. top: 0;
  166. z-index: 10;
  167. width: 100%;
  168. height: 100%;
  169. background-color: rgba(0, 0, 0, 0.85);
  170. }
  171. #mask .blin {
  172. width: 100%;
  173. height: 100%;
  174. background-image: url("../image/redPack/gold.png");
  175. -o-animation: circle 10s linear infinite;
  176. -ms-animation: circle 10s linear infinite;
  177. -moz-animation: circle 10s linear infinite;
  178. -webkit-animation: circle 10s linear infinite;
  179. animation: circle 10s linear infinite;
  180. }
  181. @keyframes circle {
  182. 0%{
  183. -o-transform: rotate(0deg);
  184. -ms-transform: rotate(0deg);
  185. -moz-transform: rotate(0deg);
  186. -webkit-transform: rotate(0deg);
  187. transform: rotate(0deg);
  188. }
  189. 100%{
  190. -o-transform: rotate(360deg);
  191. -ms-transform: rotate(360deg);
  192. -moz-transform: rotate(360deg);
  193. -webkit-transform: rotate(360deg);
  194. transform: rotate(360deg);
  195. }
  196. }
  197. #mask .caidai{
  198. position: absolute;
  199. left: 0;
  200. top: 0;
  201. z-index: 1;
  202. width: 100%;
  203. height: 100%;
  204. background-image: url("../image/redPack/dianzhui.png");
  205. -o-transform: scale(1.2);
  206. -ms-transform: scale(1.2);
  207. -moz-transform: scale(1.2);
  208. -webkit-transform: scale(1.2);
  209. transform: scale(1.2);
  210. }
  211. #mask .winning{
  212. position: absolute;
  213. left: 50%;
  214. top: 50%;
  215. z-index: 1;
  216. width: 600/@rem;
  217. height: 510/@rem;
  218. margin: -260/@rem 0 0 -300/@rem;
  219. -o-transform: scale(0.1);
  220. -ms-transform: scale(0.1);
  221. -moz-transform: scale(0.1);
  222. -webkit-transform: scale(0.1);
  223. transform: scale(0.1);
  224. }
  225. #mask .reback{
  226. -o-animation: reback .5s linear forwards;
  227. -ms-animation: reback .5s linear forwards;
  228. -moz-animation: reback .5s linear forwards;
  229. -webkit-animation: reback .5s linear forwards;
  230. animation: reback .5s linear forwards;
  231. }
  232. @keyframes reback{
  233. 100%{
  234. -o-transform: scale(1);
  235. -ms-transform: scale(1);
  236. -moz-transform: scale(1);
  237. -webkit-transform: scale(1);
  238. transform: scale(1);
  239. }
  240. }
  241. .winning .red-head{
  242. position: relative;
  243. top: -25/@rem;
  244. width: 100%;
  245. height: 335/@rem;
  246. background-image: url("../image/redPack/top.png");
  247. }
  248. .winning .red-body{
  249. position: relative;
  250. top: -160/@rem;
  251. z-index: 2;
  252. width: 100%;
  253. height: 360/@rem;
  254. background-image: url("../image/redPack/bottom.png");
  255. }
  256. .winning #card{
  257. position: absolute;
  258. left: 50%;
  259. top: 50%;
  260. z-index: 1;
  261. margin-left: -240/@rem;
  262. margin-top: -80/@rem;
  263. width: 80%;
  264. height: 320/@rem;
  265. background-image: url("../image/redPack/middle.png");
  266. -o-transition: top .5s;
  267. -ms-transition: top .5s;
  268. -moz-transition: top .5s;
  269. -webkit-transition: top .5s;
  270. transition: top .5s;
  271. }
  272. #card .win{
  273. display: block;
  274. margin: 10/@rem auto;
  275. width: 92%;
  276. height: 290/@rem;
  277. background-image: url("../image/prize/prize2.png");
  278. }
  279. .winning .pull{
  280. -o-animation: card .5s linear forwards;
  281. -ms-animation: card .5s linear forwards;
  282. -moz-animation: card .5s linear forwards;
  283. -webkit-animation: card .5s linear forwards;
  284. animation: card .5s linear forwards;
  285. }
  286. @keyframes card {
  287. 100%{
  288. margin-top:-240/@rem;
  289. }
  290. }
  291. .winning .btn{
  292. position: absolute;
  293. left: 50%;
  294. bottom: 10%;
  295. z-index: 2;
  296. width: 364/@rem;
  297. height: 71/@rem;
  298. margin-left: -182/@rem;
  299. background-image: url("../image/redPack/button.png");
  300. -o-animation: shake .5s 2 linear alternate;
  301. -ms-animation: shake .5s 2 linear alternate;
  302. -moz-animation: shake .5s 2 linear alternate;
  303. -webkit-animation: shake .5s 2 linear alternate;
  304. animation: shake .5s 2 linear alternate;
  305. }
  306. @keyframes shake {
  307. 50%{
  308. -o-transform: rotate(-5deg);
  309. -ms-transform: rotate(-5deg);
  310. -moz-transform: rotate(-5deg);
  311. -webkit-transform: rotate(-5deg);
  312. transform: rotate(-5deg);
  313. }
  314. 100%{
  315. -o-transform: rotate(5deg);
  316. -ms-transform: rotate(5deg);
  317. -moz-transform: rotate(5deg);
  318. -webkit-transform: rotate(5deg);
  319. transform: rotate(5deg);
  320. }
  321. }
  322. #close{
  323. opacity: 0;
  324. position: absolute;
  325. right: 0/@rem;
  326. top: -80/@rem;
  327. z-index: 10;
  328. width: 64/@rem;
  329. height: 64/@rem;
  330. background-image: url("../image/redPack/close.png");
  331. -o-animation: fadein .5s .5s linear forwards;
  332. -ms-animation: fadein .5s .5s linear forwards;
  333. -moz-animation: fadein .5s .5s linear forwards;
  334. -webkit-animation: fadein .5s .5s linear forwards;
  335. animation: fadein .5s .5s linear forwards;
  336. }
  337. @keyframes fadein {
  338. 100%{
  339. opacity: 1;
  340. -o-transform: rotate(360deg);
  341. -ms-transform: rotate(360deg);
  342. -moz-transform: rotate(360deg);
  343. -webkit-transform: rotate(360deg);
  344. transform: rotate(360deg);
  345. }
  346. }