Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 

199 lignes
4.0 KiB

  1. @charset "utf-8";
  2. @rem:75rem;
  3. body{
  4. background: #5a1521;
  5. }
  6. #wrap{
  7. margin-top: -1/@rem;
  8. background-image: url("../image/bg.png");
  9. }
  10. .rule {
  11. position: absolute;
  12. left: 42/@rem;
  13. top: 0;
  14. width: 49/@rem;
  15. height: 62/@rem;
  16. background-image: url("../image/rule.png");
  17. text-align: center;
  18. font-size: 18/@rem;
  19. font-weight: bold;
  20. color: #2078a9;
  21. }
  22. .my {
  23. position: absolute;
  24. right: 0;
  25. top: 12/@rem;
  26. width: 88/@rem;
  27. min-width: 88/55rem;
  28. background-color: #fdc434;
  29. line-height: 36/@rem;
  30. font-size: 18/@rem;
  31. text-align: center;
  32. color: #fff;
  33. border-radius: 3px 0 0 3px;
  34. }
  35. /*砸蛋区域*/
  36. .box {
  37. position: absolute;
  38. left: 0;
  39. bottom: 0;
  40. width: 100%;
  41. height: 820/@rem;
  42. }
  43. .tips {
  44. width: 250/@rem;
  45. margin: 30/@rem auto 0;
  46. background-color: #ff6d69;
  47. text-align: center;
  48. font-size: 20/@rem;
  49. line-height: 40/@rem;
  50. color: #fff;
  51. border-radius: 20/@rem;
  52. }
  53. #change {
  54. margin: 0 5/@rem;
  55. }
  56. .egg {
  57. width: 750/@rem;
  58. }
  59. .egg li {
  60. position: relative;
  61. float: left;
  62. width: 126/@rem;
  63. height: 196/@rem;
  64. margin: 10/@rem 60/@rem;
  65. }
  66. .egg li img{
  67. width: 126/@rem;
  68. height: 41/@rem;
  69. }
  70. .egg li img.goldegg{
  71. width: 110/@rem;
  72. height: 151/@rem;
  73. }
  74. .egg .info {
  75. display: none;
  76. position: absolute;
  77. left: -12/@rem;
  78. top: 25/@rem;
  79. width: 73/@rem;
  80. height: 44/@rem;
  81. background-image: url("../image/tips.png");
  82. }
  83. .egg li img.goldegg {
  84. position: relative;
  85. left: 10/@rem;
  86. top: 20/@rem;
  87. width: 110/@rem;
  88. height: 151/@rem;
  89. -o-transform-origin: center bottom;
  90. -ms-transform-origin: center bottom;
  91. -moz-transform-origin: center bottom;
  92. -webkit-transform-origin: center bottom;
  93. transform-origin: center bottom;
  94. -o-transition: .5s;
  95. -ms-transition: .5s;
  96. -moz-transition: .5s;
  97. -webkit-transition: .5s;
  98. transition: .5s;
  99. }
  100. .egg li img.jump {
  101. -o-animation: jump .5s infinite alternate;
  102. -ms-animation: jump .5s infinite alternate;
  103. -moz-animation: jump .5s infinite alternate;
  104. -webkit-animation: jump .5s infinite alternate;
  105. animation: jump .5s infinite alternate;
  106. }
  107. @keyframes jump {
  108. 100% {
  109. top: 10/@rem;
  110. }
  111. }
  112. #info {
  113. position: absolute;
  114. left: 40/@rem;;
  115. top: 115/@rem;;
  116. width: 75/@rem;;
  117. height: 40/@rem;;
  118. }
  119. #hammer {
  120. position: absolute;
  121. left: 665/@rem;
  122. top: 60/@rem;
  123. width: 110/@rem;
  124. height: 120/@rem;
  125. background-image: url("../image/hammer.png");
  126. -o-transform-origin: right bottom;
  127. -ms-transform-origin: right bottom;
  128. -moz-transform-origin: right bottom;
  129. -webkit-transform-origin: right bottom;
  130. transform-origin: right bottom;
  131. -o-transition: 1s ease-in-out;
  132. -ms-transition: 1s ease-in-out;
  133. -moz-transition: 1s ease-in-out;
  134. -webkit-transition: 1s ease-in-out;
  135. transition: 1s ease-in-out;
  136. }
  137. .shak{
  138. -o-animation: hammer-move .5s linear infinite alternate;
  139. -ms-animation: hammer-move .5s linear infinite alternate;
  140. -moz-animation: hammer-move .5s linear infinite alternate;
  141. -webkit-animation: hammer-move .5s linear infinite alternate;
  142. animation: hammer-move .5s linear infinite alternate;
  143. }
  144. @keyframes hammer-move {
  145. 100% {
  146. -o-transform: rotate(-10deg);
  147. -ms-transform: rotate(-10deg);
  148. -moz-transform: rotate(-10deg);
  149. -webkit-transform: rotate(-10deg);
  150. transform: rotate(-10deg);
  151. }
  152. }
  153. .hit{
  154. -o-animation: hammer-hit .2s 3 alternate;
  155. -ms-animation: hammer-hit .2s 3 alternate;
  156. -moz-animation: hammer-hit .2s 3 alternate;
  157. -webkit-animation: hammer-hit .2s 3 alternate;
  158. animation: hammer-hit .2s 3 alternate;
  159. }
  160. @keyframes hammer-hit {
  161. 100% {
  162. -o-transform: rotate(-20deg);
  163. -ms-transform: rotate(-20deg);
  164. -moz-transform: rotate(-20deg);
  165. -webkit-transform: rotate(-20deg);
  166. transform: rotate(-20deg);
  167. }
  168. }
  169. /*规则背景色*/
  170. #mask-rule .box-rule{
  171. background-color: #f7b50b;
  172. }
  173. #mask-rule .box-rule .star{
  174. background-image: url("../../common/image/rule/star1.png");
  175. }