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.
 
 
 

180 rivejä
3.4 KiB

  1. @charset "utf-8";
  2. @rem:75rem;
  3. body{
  4. background: #ff605d;
  5. }
  6. #wrap{
  7. margin-top: -1/@rem;
  8. background-image: url("../image/bg.png");
  9. }
  10. /*三个不同的动画效果*/
  11. .caidai1, .caidai2, .caidai3 {
  12. opacity: 1;
  13. position: absolute;
  14. left: 40/@rem;
  15. top: 240/@rem;
  16. width: 77/@rem;
  17. height: 74/@rem;
  18. background-image: url("../image/hongbao1.png");
  19. -o-animation: caidai1 1s ease-in-out infinite;
  20. -ms-animation: caidai1 1s ease-in-out infinite;
  21. -moz-animation: caidai1 1s ease-in-out infinite;
  22. -webkit-animation: caidai1 1s ease-in-out infinite;
  23. animation: caidai1 1s ease-in-out infinite;
  24. }
  25. @keyframes caidai1 {
  26. 100% {
  27. opacity: 0;
  28. left: 140/@rem;
  29. top: 340/@rem;
  30. }
  31. }
  32. .caidai2 {
  33. left: 600/@rem;
  34. top: 140/@rem;
  35. width: 95/@rem;
  36. height: 80/@rem;
  37. background-image: url("../image/hongbao2.png");
  38. -o-animation: caidai2 1s ease-in-out infinite;
  39. -ms-animation: caidai2 1s ease-in-out infinite;
  40. -moz-animation: caidai2 1s ease-in-out infinite;
  41. -webkit-animation: caidai2 1s ease-in-out infinite;
  42. animation: caidai2 1s ease-in-out infinite;
  43. }
  44. @keyframes caidai2 {
  45. 100% {
  46. opacity: 0;
  47. left: 500/@rem;
  48. top: 240/@rem;
  49. }
  50. }
  51. .caidai3 {
  52. left: 0;
  53. top: 860/@rem;
  54. width: 98/@rem;
  55. height: 88/@rem;
  56. background-image: url("../image/gold.png");
  57. -o-animation: caidai3 .5s ease-in-out infinite alternate;
  58. -ms-animation: caidai3 .5s ease-in-out infinite alternate;
  59. -moz-animation: caidai3 .5s ease-in-out infinite alternate;
  60. -webkit-animation: caidai3 .5s ease-in-out infinite alternate;
  61. animation: caidai3 .5s ease-in-out infinite alternate;
  62. }
  63. @keyframes caidai3 {
  64. 100% {
  65. top: 900/@rem;
  66. }
  67. }
  68. /*主体*/
  69. .box {
  70. position: absolute;
  71. left: 0;
  72. bottom: 0;
  73. width: 100%;
  74. height: 790/@rem;
  75. }
  76. .rule, .my {
  77. position: absolute;
  78. width: 165/@rem;
  79. height: 50/@rem;
  80. background-color: #e04b34;
  81. text-align: center;
  82. line-height: 50/@rem;
  83. font-size: 22/@rem;
  84. font-weight: bold;
  85. color: #fff3f0;
  86. border-radius: 20/@rem;
  87. }
  88. .rule {
  89. left: 125/@rem;
  90. }
  91. .my {
  92. right: 125/@rem;
  93. }
  94. /*刮刮乐图层*/
  95. .panel{
  96. position: absolute;
  97. left: 50%;
  98. top: 135/@rem;
  99. z-index: 1;
  100. margin-left: -300/@rem;
  101. width: 600/@rem;
  102. height: 350/@rem;
  103. background-image: url("../image/panel.png");
  104. }
  105. #canvas{
  106. position: absolute;
  107. left: 50%;
  108. top: 50%;
  109. margin: -154/@rem 0 0 -281/@rem;
  110. }
  111. #canvas-mask{
  112. position: absolute;
  113. left: 50%;
  114. top: 50%;
  115. z-index: 1;
  116. width: 562/@rem;
  117. height: 308/@rem;
  118. margin: -154/@rem 0 0 -281/@rem;
  119. }
  120. #canvas-mask #btn{
  121. position: absolute;
  122. left: 50%;
  123. top: 50%;
  124. margin: -25/@rem 0 0 -96/@rem;
  125. width: 192/@rem;
  126. height: 50/@rem;
  127. background-image: url("../image/start.png");
  128. }
  129. #canvas-mask p{
  130. margin-top: 228/@rem;
  131. height: 22/@rem;
  132. text-align: center;
  133. line-height: 22/@rem;
  134. font-size: 22/@rem;
  135. color: #fff;
  136. }
  137. /*奖品展示*/
  138. .awards{
  139. bottom: 24/@rem;
  140. margin-left: -350/@rem;
  141. width: 700/@rem;
  142. height: 175/@rem;
  143. background-color: #ee3c3a;
  144. border-radius: 20/@rem;
  145. }
  146. .awards .swiper-slide{
  147. margin: 20/@rem 30/@rem 0;
  148. }
  149. /*规则背景色*/
  150. #mask-rule .box-rule{
  151. background-color: #fe5c51;
  152. }
  153. #mask-rule .box-rule .star{
  154. background-image: url("../../common/image/rule/star2.png");
  155. }