Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

198 рядки
4.2 KiB

  1. @charset "utf-8";
  2. body {
  3. background: #99081c;
  4. }
  5. #wrap {
  6. margin-top: -0.01333333rem;
  7. background-image: url("../image/bg.png");
  8. }
  9. /*三个不同的动画效果*/
  10. .caidai1,
  11. .caidai2,
  12. .caidai3 {
  13. opacity: 1;
  14. position: absolute;
  15. left: 0.53333333rem;
  16. top: 3.2rem;
  17. width: 1.02666667rem;
  18. height: 0.98666667rem;
  19. background-image: url("../image/hongbao1.png");
  20. -o-animation: caidai1 1s ease-in-out infinite;
  21. -ms-animation: caidai1 1s ease-in-out infinite;
  22. -moz-animation: caidai1 1s ease-in-out infinite;
  23. -webkit-animation: caidai1 1s ease-in-out infinite;
  24. animation: caidai1 1s ease-in-out infinite;
  25. }
  26. @keyframes caidai1 {
  27. 100% {
  28. opacity: 0;
  29. left: 1.86666667rem;
  30. top: 4.53333333rem;
  31. }
  32. }
  33. .caidai2 {
  34. left: 8rem;
  35. top: 1.86666667rem;
  36. width: 1.26666667rem;
  37. height: 1.06666667rem;
  38. background-image: url("../image/hongbao2.png");
  39. -o-animation: caidai2 1s ease-in-out infinite;
  40. -ms-animation: caidai2 1s ease-in-out infinite;
  41. -moz-animation: caidai2 1s ease-in-out infinite;
  42. -webkit-animation: caidai2 1s ease-in-out infinite;
  43. animation: caidai2 1s ease-in-out infinite;
  44. }
  45. @keyframes caidai2 {
  46. 100% {
  47. opacity: 0;
  48. left: 6.66666667rem;
  49. top: 3.2rem;
  50. }
  51. }
  52. .caidai3 {
  53. left: 0;
  54. top: 11.46666667rem;
  55. width: 1.30666667rem;
  56. height: 1.17333333rem;
  57. background-image: url("../image/gold.png");
  58. -o-animation: caidai3 0.5s ease-in-out infinite alternate;
  59. -ms-animation: caidai3 0.5s ease-in-out infinite alternate;
  60. -moz-animation: caidai3 0.5s ease-in-out infinite alternate;
  61. -webkit-animation: caidai3 0.5s ease-in-out infinite alternate;
  62. animation: caidai3 0.5s ease-in-out infinite alternate;
  63. }
  64. @keyframes caidai3 {
  65. 100% {
  66. top: 12rem;
  67. }
  68. }
  69. /*主体*/
  70. .box {
  71. position: absolute;
  72. left: 0;
  73. bottom: 0;
  74. width: 100%;
  75. height: 10.53333333rem;
  76. }
  77. .rule,
  78. .my {
  79. margin-top: 0.48rem;
  80. width: 1.09333333rem;
  81. height: 0.74666667rem;
  82. background-color: #ff9d1b;
  83. text-align: center;
  84. line-height: 0.74666667rem;
  85. font-size: 0.32rem;
  86. color: #fff;
  87. }
  88. .rule {
  89. border-top-right-radius: 0.13333333rem;
  90. border-bottom-right-radius: 0.13333333rem;
  91. }
  92. .my {
  93. position: absolute;
  94. right: 0;
  95. top: 0.56rem;
  96. width: 1.17333333rem;
  97. min-width: 1.6rem;
  98. background-color: #fdc434;
  99. line-height: 0.64666667rem;
  100. font-size: 0.24rem;
  101. text-align: center;
  102. color: #fff;
  103. border-radius: 3px 0 0 3px;
  104. }
  105. #myWin{
  106. position: absolute;
  107. top: 0;
  108. right: 0;
  109. background-color: #fe5362;
  110. border-top-left-radius: 0.13333333rem;
  111. border-bottom-left-radius: 0.13333333rem;
  112. margin-top: 0.48rem;
  113. width: 1.09333333rem;
  114. height: 0.74666667rem;
  115. text-align: center;
  116. line-height: 0.74666667rem;
  117. font-size: 0.32rem;
  118. color: #fff;
  119. }
  120. #share{
  121. position: absolute;
  122. top: 1.2rem;
  123. right: 0;
  124. background-color: #34b202;
  125. border-top-left-radius: 0.13333333rem;
  126. border-bottom-left-radius: 0.13333333rem;
  127. margin-top: 0.48rem;
  128. width: 1.09333333rem;
  129. height: 0.64666667rem;
  130. text-align: center;
  131. line-height: 0.64666667rem;
  132. font-size: 0.32rem;
  133. color: #fff;
  134. z-index: 10;
  135. }
  136. /*刮刮乐图层*/
  137. .panel {
  138. position: absolute;
  139. left: 50%;
  140. top: 1.8rem;
  141. z-index: 1;
  142. margin-left: -4rem;
  143. width: 8rem;
  144. height: 4.66666667rem;
  145. background-image: url("../image/panel.png");
  146. }
  147. #canvas {
  148. position: absolute;
  149. left: 50%;
  150. top: 50%;
  151. margin: -2.05333333rem 0 0 -3.74666667rem;
  152. }
  153. #canvas-mask {
  154. position: absolute;
  155. left: 50%;
  156. top: 50%;
  157. z-index: 1;
  158. width: 7.49333333rem;
  159. height: 4.10666667rem;
  160. margin: -2.05333333rem 0 0 -3.74666667rem;
  161. }
  162. #canvas-mask #btn {
  163. position: absolute;
  164. left: 50%;
  165. top: 50%;
  166. margin: -0.33333333rem 0 0 -1.28rem;
  167. width: 2.56rem;
  168. height: 0.66666667rem;
  169. background-image: url("../image/start.png");
  170. }
  171. #canvas-mask p {
  172. margin-top: 3.04rem;
  173. height: 0.29333333rem;
  174. text-align: center;
  175. line-height: 0.29333333rem;
  176. font-size: 0.29333333rem;
  177. color: #fff;
  178. }
  179. /*奖品展示*/
  180. .awards {
  181. bottom: 0.32rem;
  182. margin-left: -4.66666667rem;
  183. width: 9.33333333rem;
  184. height: 2.33333333rem;
  185. background-color: #ee3c3a;
  186. border-radius: 0.26666667rem;
  187. }
  188. .awards .swiper-slide {
  189. margin: 0.26666667rem 0.4rem 0;
  190. }
  191. /*规则背景色*/
  192. #mask-rule .box-rule {
  193. background-color: #fe5c51;
  194. }
  195. #mask-rule .box-rule .star {
  196. background-image: url("../../common/image/rule/star2.png");
  197. }