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.
 
 
 

508 wiersze
9.5 KiB

  1. @charset "utf-8";
  2. body,
  3. div,
  4. p,
  5. ul,
  6. ol,
  7. li,
  8. dl,
  9. dt,
  10. dd,
  11. h1,
  12. h2,
  13. h3,
  14. h4,
  15. h5,
  16. h6,
  17. pre,
  18. form,
  19. input,
  20. select,
  21. button,
  22. textarea,
  23. table,
  24. th,
  25. td,
  26. a,
  27. span,
  28. canvas {
  29. margin: 0;
  30. padding: 0;
  31. background: no-repeat center / contain;
  32. cursor: default;
  33. }
  34. *{
  35. -webkit-overflow-scrolling: touch;
  36. }
  37. body {
  38. display: block;
  39. position: relative;
  40. margin: auto;
  41. max-width: 10rem;
  42. min-width: 4.26666667rem;
  43. font-size: 0.16rem;
  44. font-family: "Microsoft Yahei", "Arial", sans-serif;
  45. }
  46. ul,
  47. ol {
  48. list-style: none;
  49. }
  50. img {
  51. border: none;
  52. }
  53. a {
  54. outline: none;
  55. text-decoration: none;
  56. color: inherit;
  57. }
  58. a:hover {
  59. text-decoration: none;
  60. }
  61. input {
  62. outline: none;
  63. }
  64. .block {
  65. display: block;
  66. }
  67. .none {
  68. display: none;
  69. }
  70. .r {
  71. position: relative;
  72. }
  73. .a {
  74. position: absolute;
  75. }
  76. .fl {
  77. float: left;
  78. }
  79. .fr {
  80. float: right;
  81. }
  82. .clearfix:after {
  83. content: "";
  84. clear: both;
  85. display: block;
  86. visibility: hidden;
  87. height: 0;
  88. }
  89. /*H5游戏共用类*/
  90. #wrap {
  91. overflow: hidden;
  92. position: relative;
  93. width: 100%;
  94. height: 16.01333333rem;
  95. }
  96. /*奖品展示*/
  97. .awards {
  98. overflow: hidden;
  99. position: absolute;
  100. left: 50%;
  101. }
  102. .awards .swiper-slide {
  103. margin: 0.06666667rem 0.26666667rem;
  104. padding: 0.4rem;
  105. width: 1rem;
  106. height: 1rem;
  107. background-image: url("../image/icon/drag/drag_box.png");
  108. }
  109. .awards .swiper-slide img {
  110. width: inherit;
  111. height: inherit;
  112. }
  113. /*规则弹窗*/
  114. #mask-rule,
  115. #mask {
  116. display: none;
  117. position: fixed;
  118. left: 0;
  119. top: 0;
  120. z-index: 10;
  121. width: 100%;
  122. height: 100%;
  123. background-color: rgba(0, 0, 0, 0.85);
  124. }
  125. #mask-rule .box-rule {
  126. position: relative;
  127. margin: 20% auto;
  128. padding-top: 0.53333333rem;
  129. width: 90%;
  130. height: 70%;
  131. border-radius: 0.26666667rem;
  132. }
  133. #mask-rule .box-rule .star {
  134. position: absolute;
  135. left: 50%;
  136. top: -1.33333333rem;
  137. margin-left: -1.73333333rem;
  138. width: 3.45333333rem;
  139. height: 1.16rem;
  140. }
  141. #mask-rule .box-rule h2 {
  142. width: 100%;
  143. text-align: center;
  144. line-height: 0.45333333rem;
  145. font-size: 0.45333333rem;
  146. font-weight: normal;
  147. color: #fff;
  148. }
  149. #mask-rule .box-rule h2::before,
  150. #mask-rule .box-rule h2::after {
  151. display: inline-block;
  152. content: "";
  153. width: 0.24rem;
  154. height: 0.24rem;
  155. background-color: #fff;
  156. border-radius: 50%;
  157. }
  158. #mask-rule .box-rule h2::before {
  159. margin-right: 0.32rem;
  160. }
  161. #mask-rule .box-rule h2::after {
  162. margin-left: 0.32rem;
  163. }
  164. #mask-rule #close-rule {
  165. position: absolute;
  166. right: 0.45333333rem;
  167. top: 0.50666667rem;
  168. width: 0.53333333rem;
  169. height: 0.53333333rem;
  170. background-image: url("../image/rule/close.png");
  171. }
  172. /*内容盒子*/
  173. #mask-rule .con {
  174. overflow: auto;
  175. position: relative;
  176. margin: 0.53333333rem auto;
  177. padding-right: 0.2rem;
  178. width: 7.73333333rem;
  179. height: 82%;
  180. line-height: 0.64rem;
  181. font-size: 0.34666667rem;
  182. color: #fff;
  183. }
  184. #mask-rule .con .text {
  185. position: absolute;
  186. top: 0;
  187. left: 0;
  188. width: inherit;
  189. height: auto;
  190. }
  191. /*中奖提示*/
  192. #mask {
  193. display: none;
  194. position: fixed;
  195. left: 0;
  196. top: 0;
  197. z-index: 10;
  198. width: 100%;
  199. height: 100%;
  200. background-color: rgba(0, 0, 0, 0.85);
  201. }
  202. #mask .blin {
  203. width: 100%;
  204. height: 100%;
  205. background-image: url("../image/redPack/gold.png");
  206. -o-animation: circle 10s linear infinite;
  207. -ms-animation: circle 10s linear infinite;
  208. -moz-animation: circle 10s linear infinite;
  209. -webkit-animation: circle 10s linear infinite;
  210. animation: circle 10s linear infinite;
  211. }
  212. @keyframes circle {
  213. 0% {
  214. -o-transform: rotate(0deg);
  215. -ms-transform: rotate(0deg);
  216. -moz-transform: rotate(0deg);
  217. -webkit-transform: rotate(0deg);
  218. transform: rotate(0deg);
  219. }
  220. 100% {
  221. -o-transform: rotate(360deg);
  222. -ms-transform: rotate(360deg);
  223. -moz-transform: rotate(360deg);
  224. -webkit-transform: rotate(360deg);
  225. transform: rotate(360deg);
  226. }
  227. }
  228. #mask .caidai {
  229. position: absolute;
  230. left: 0;
  231. top: 0;
  232. z-index: 1;
  233. width: 100%;
  234. height: 100%;
  235. background-image: url("../image/redPack/dianzhui.png");
  236. -o-transform: scale(1.2);
  237. -ms-transform: scale(1.2);
  238. -moz-transform: scale(1.2);
  239. -webkit-transform: scale(1.2);
  240. transform: scale(1.2);
  241. }
  242. #mask .winning {
  243. position: absolute;
  244. left: 50%;
  245. top: 50%;
  246. z-index: 1;
  247. width: 8rem;
  248. height: 6.8rem;
  249. margin: -3.46666667rem 0 0 -4rem;
  250. -o-transform: scale(0.1);
  251. -ms-transform: scale(0.1);
  252. -moz-transform: scale(0.1);
  253. -webkit-transform: scale(0.1);
  254. transform: scale(0.1);
  255. }
  256. #mask .reback {
  257. -o-animation: reback .5s linear forwards;
  258. -ms-animation: reback .5s linear forwards;
  259. -moz-animation: reback .5s linear forwards;
  260. -webkit-animation: reback .5s linear forwards;
  261. animation: reback .5s linear forwards;
  262. }
  263. @keyframes reback {
  264. 100% {
  265. -o-transform: scale(1);
  266. -ms-transform: scale(1);
  267. -moz-transform: scale(1);
  268. -webkit-transform: scale(1);
  269. transform: scale(1);
  270. }
  271. }
  272. .winning .red-head {
  273. position: relative;
  274. top: -0.33333333rem;
  275. width: 100%;
  276. height: 4.46666667rem;
  277. background-image: url("../image/redPack/top.png");
  278. }
  279. .winning .red-body {
  280. position: relative;
  281. top: -2.33333333rem;
  282. z-index: 2;
  283. width: 100%;
  284. height: 4.8rem;
  285. background-image: url("../image/redPack/bottom.png");
  286. }
  287. .winning .red-body p{
  288. width: 60%;
  289. margin: 0 auto;
  290. text-align: center;
  291. padding-top: 2rem;
  292. font-size: 0.34rem;
  293. color: #ffee37;
  294. }
  295. .winning #card {
  296. position: absolute;
  297. left: 50%;
  298. top: 50%;
  299. z-index: 1;
  300. margin-left: -3.2rem;
  301. margin-top: -1.06666667rem;
  302. width: 80%;
  303. height: 4.26666667rem;
  304. background-image: url("../image/redPack/middle.png");
  305. -o-transition: top .5s;
  306. -ms-transition: top .5s;
  307. -moz-transition: top .5s;
  308. -webkit-transition: top .5s;
  309. transition: top .5s;
  310. }
  311. #card .win {
  312. display: block;
  313. margin: 0.13333333rem auto;
  314. width: 92%;
  315. height: 3.86666667rem;
  316. background-image: url("../image/prize/prize2.png");
  317. }
  318. .winning .pull {
  319. -o-animation: card .5s linear forwards;
  320. -ms-animation: card .5s linear forwards;
  321. -moz-animation: card .5s linear forwards;
  322. -webkit-animation: card .5s linear forwards;
  323. animation: card .5s linear forwards;
  324. }
  325. @keyframes card {
  326. 100% {
  327. margin-top: -3.2rem;
  328. }
  329. }
  330. .winning .btn {
  331. position: absolute;
  332. left: 50%;
  333. bottom: 10%;
  334. z-index: 2;
  335. width: 4.85333333rem;
  336. height: 0.94666667rem;
  337. margin-left: -2.42666667rem;
  338. width: 4.85333333rem;
  339. font-size: 0.4rem;
  340. line-height: 0.94666667rem;
  341. color: #fd4859;
  342. text-align: center;
  343. background-image: url("../image/redPack/button.png");
  344. -o-animation: shake .5s 2 linear alternate;
  345. -ms-animation: shake .5s 2 linear alternate;
  346. -moz-animation: shake .5s 2 linear alternate;
  347. -webkit-animation: shake .5s 2 linear alternate;
  348. animation: shake .5s 2 linear alternate;
  349. }
  350. @keyframes shake {
  351. 50% {
  352. -o-transform: rotate(-5deg);
  353. -ms-transform: rotate(-5deg);
  354. -moz-transform: rotate(-5deg);
  355. -webkit-transform: rotate(-5deg);
  356. transform: rotate(-5deg);
  357. }
  358. 100% {
  359. -o-transform: rotate(5deg);
  360. -ms-transform: rotate(5deg);
  361. -moz-transform: rotate(5deg);
  362. -webkit-transform: rotate(5deg);
  363. transform: rotate(5deg);
  364. }
  365. }
  366. #close {
  367. opacity: 0;
  368. position: absolute;
  369. right: 0rem;
  370. top: -1.06666667rem;
  371. z-index: 10;
  372. width: 0.85333333rem;
  373. height: 0.85333333rem;
  374. background-image: url("../image/redPack/close.png");
  375. -o-animation: fadein .5s .5s linear forwards;
  376. -ms-animation: fadein .5s .5s linear forwards;
  377. -moz-animation: fadein .5s .5s linear forwards;
  378. -webkit-animation: fadein .5s .5s linear forwards;
  379. animation: fadein .5s .5s linear forwards;
  380. }
  381. @keyframes fadein {
  382. 100% {
  383. opacity: 1;
  384. -o-transform: rotate(360deg);
  385. -ms-transform: rotate(360deg);
  386. -moz-transform: rotate(360deg);
  387. -webkit-transform: rotate(360deg);
  388. transform: rotate(360deg);
  389. }
  390. }
  391. /* 点击分享弹出的弹框样式 */
  392. .b1{
  393. position:fixed;
  394. width:100%;
  395. height:100%;
  396. top:0px;
  397. background:rgba(0,0,0,0.9);
  398. overflow: hidden;
  399. z-index: 100;
  400. display: none;
  401. }
  402. .t_w{
  403. display: none;
  404. position: fixed;
  405. height: 100%;
  406. left: 0%;
  407. top: 0%;
  408. width: 100%;
  409. background: url(../image/mengceng.png) no-repeat;
  410. background-size: 100%;
  411. z-index: 1000;
  412. padding: 0.8rem 0.4rem;
  413. box-sizing: border-box;
  414. }
  415. .span-text{
  416. font-size: 0.4rem;
  417. line-height: 0.8rem,
  418. }
  419. .span-blue{
  420. font-size: 0.4rem;
  421. color: mediumorchid;
  422. margin: 0 0.2rem;
  423. line-height: 0.8rem;
  424. }
  425. .s-close{
  426. display: block;
  427. position: absolute;
  428. bottom: -1.3rem;
  429. z-index: 500;
  430. width: 1rem;
  431. left: 50%;
  432. margin-left: -0.6rem;
  433. overflow: hidden;
  434. }
  435. #gotoindex{
  436. position: absolute;
  437. top: 2.4rem;
  438. right: 0;
  439. background-color: #7184E2;
  440. border-top-left-radius: 0.13333333rem;
  441. border-bottom-left-radius: 0.13333333rem;
  442. margin-top: 0.48rem;
  443. width: 1.09333333rem;
  444. height: 0.74666667rem;
  445. text-align: center;
  446. line-height: 0.74666667rem;
  447. font-size: 0.32rem;
  448. color: #fff;
  449. }
  450. #warnning-box-bg{
  451. height: 100vh;
  452. width: 100%;
  453. position: fixed;
  454. z-index: 100;
  455. opacity: 0.7;
  456. background: #000;
  457. top: 0;
  458. left: 0;
  459. display: none;
  460. }
  461. #warnning-box{
  462. width: 70%;
  463. background: #fff;
  464. z-index: 200;
  465. position: fixed;
  466. top: 50%;
  467. margin-top: -2rem;
  468. left: 50%;
  469. margin-left: -35%;
  470. border-radius: 0.15rem;
  471. padding: 0 0.3rem;
  472. padding-top: 0.6rem;
  473. box-sizing: border-box;
  474. display: none;
  475. }
  476. #w-title{
  477. font-size: 0.26rem;
  478. line-height: 0.32rem;
  479. color: #000;
  480. }
  481. #w-button{
  482. font-size: 0.26rem;
  483. line-height: 0.6rem;
  484. color: #000;
  485. width: 1.2rem;
  486. height: 0.6rem;
  487. margin: 0.4rem 0 0.2rem;
  488. background: #50009f;
  489. border-radius: 0.15rem;
  490. text-align: center;
  491. float: right;
  492. color: #fff;
  493. }
  494. #w-cancel{
  495. font-size: 0.26rem;
  496. line-height: 0.6rem;
  497. color: #000;
  498. width: 1.2rem;
  499. height: 0.6rem;
  500. margin: 0.4rem 0 0.3rem 0.3rem;
  501. background: #50009f;
  502. border-radius: 0.15rem;
  503. text-align: center;
  504. float: right;
  505. color: #fff;
  506. }