gameready.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style>
  8. .full {
  9. position: absolute;
  10. top: 0;
  11. left: 0;
  12. bottom: 0;
  13. right: 0;
  14. }
  15. .waitting {
  16. z-index: 99;
  17. background-color: #7f943d;
  18. }
  19. .pacman {
  20. position: absolute;
  21. top: 50%;
  22. left: 50%;
  23. transform: translate(-50%, -50%);
  24. }
  25. @-webkit-keyframes rotate_pacman_half_up {
  26. 0% {
  27. -webkit-transform: rotate(270deg);
  28. transform: rotate(270deg);
  29. }
  30. 50% {
  31. -webkit-transform: rotate(360deg);
  32. transform: rotate(360deg);
  33. }
  34. 100% {
  35. -webkit-transform: rotate(270deg);
  36. transform: rotate(270deg);
  37. }
  38. }
  39. @keyframes rotate_pacman_half_up {
  40. 0% {
  41. -webkit-transform: rotate(270deg);
  42. transform: rotate(270deg);
  43. }
  44. 50% {
  45. -webkit-transform: rotate(360deg);
  46. transform: rotate(360deg);
  47. }
  48. 100% {
  49. -webkit-transform: rotate(270deg);
  50. transform: rotate(270deg);
  51. }
  52. }
  53. @-webkit-keyframes rotate_pacman_half_down {
  54. 0% {
  55. -webkit-transform: rotate(90deg);
  56. transform: rotate(90deg);
  57. }
  58. 50% {
  59. -webkit-transform: rotate(0deg);
  60. transform: rotate(0deg);
  61. }
  62. 100% {
  63. -webkit-transform: rotate(90deg);
  64. transform: rotate(90deg);
  65. }
  66. }
  67. @keyframes rotate_pacman_half_down {
  68. 0% {
  69. -webkit-transform: rotate(90deg);
  70. transform: rotate(90deg);
  71. }
  72. 50% {
  73. -webkit-transform: rotate(0deg);
  74. transform: rotate(0deg);
  75. }
  76. 100% {
  77. -webkit-transform: rotate(90deg);
  78. transform: rotate(90deg);
  79. }
  80. }
  81. @-webkit-keyframes pacman-balls {
  82. 75% {
  83. opacity: 0.7;
  84. }
  85. 100% {
  86. -webkit-transform: translate(-100px, -6.25px);
  87. transform: translate(-100px, -6.25px);
  88. }
  89. }
  90. @keyframes pacman-balls {
  91. 75% {
  92. opacity: 0.7;
  93. }
  94. 100% {
  95. -webkit-transform: translate(-100px, -6.25px);
  96. transform: translate(-100px, -6.25px);
  97. }
  98. }
  99. .pacman>div:nth-child(2) {
  100. -webkit-animation: pacman-balls 1s 0s infinite linear;
  101. animation: pacman-balls 1s 0s infinite linear;
  102. }
  103. .pacman>div:nth-child(3) {
  104. -webkit-animation: pacman-balls 1s 0.33s infinite linear;
  105. animation: pacman-balls 1s 0.33s infinite linear;
  106. }
  107. .pacman>div:nth-child(4) {
  108. -webkit-animation: pacman-balls 1s 0.66s infinite linear;
  109. animation: pacman-balls 1s 0.66s infinite linear;
  110. }
  111. .pacman>div:nth-child(5) {
  112. -webkit-animation: pacman-balls 1s 0.99s infinite linear;
  113. animation: pacman-balls 1s 0.99s infinite linear;
  114. }
  115. .pacman>div:first-of-type {
  116. width: 0px;
  117. height: 0px;
  118. border-right: 25px solid transparent;
  119. border-top: 25px solid #fff;
  120. border-left: 25px solid #fff;
  121. border-bottom: 25px solid #fff;
  122. border-radius: 25px;
  123. -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
  124. animation: rotate_pacman_half_up 0.5s 0s infinite;
  125. }
  126. .pacman>div:nth-child(2) {
  127. width: 0px;
  128. height: 0px;
  129. border-right: 25px solid transparent;
  130. border-top: 25px solid #fff;
  131. border-left: 25px solid #fff;
  132. border-bottom: 25px solid #fff;
  133. border-radius: 25px;
  134. -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
  135. animation: rotate_pacman_half_down 0.5s 0s infinite;
  136. margin-top: -50px;
  137. }
  138. .pacman>div:nth-child(3),
  139. .pacman>div:nth-child(4),
  140. .pacman>div:nth-child(5),
  141. .pacman>div:nth-child(6) {
  142. background-color: #fff;
  143. width: 15px;
  144. height: 15px;
  145. border-radius: 100%;
  146. margin: 2px;
  147. width: 10px;
  148. height: 10px;
  149. position: absolute;
  150. -webkit-transform: translate(0, -6.25px);
  151. -ms-transform: translate(0, -6.25px);
  152. transform: translate(0, -6.25px);
  153. top: 25px;
  154. left: 100px;
  155. }
  156. .wait-text {
  157. display: block;
  158. color: #fff;
  159. font-size: 12px;
  160. margin-top: 20px;
  161. }
  162. .btn {
  163. display: block;
  164. width: 43vw;
  165. min-height:12vw;
  166. margin: 10vw auto;
  167. }
  168. .btn img {
  169. display: block;
  170. width: 100%;
  171. height: auto;
  172. }
  173. </style>
  174. </head>
  175. <body>
  176. <!-- 等待页 -->
  177. <section class="waitting full" id="load">
  178. <div class="loader-inner pacman">
  179. <div></div>
  180. <div></div>
  181. <div></div>
  182. <div></div>
  183. <div></div>
  184. <p class="wait-text">游戏已经开始,请等待下一轮</p>
  185. <a href="http://gjnh.100t.com/gjnh/index.php/Index/"class="btn"><img src="img/btn.png"></a>
  186. </div>
  187. </section>
  188. </body>
  189. </html>