maintain.html 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"/>
  7. <meta name="format-detection" content="telephone=no,email=no">
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta http-equiv="Cache-Control" content="no-cache,no-store,no-siteapp,must-revalidate">
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="expires" content="0">
  13. <meta name="author" content="">
  14. <meta name="description" content=""/>
  15. <meta name="keywords" content="扫码支付,线上投币,运营数据,物联网"/>
  16. <title>服务器升级</title>
  17. <style>
  18. /*不能引入外部文件,包括css js 图片*/
  19. html, body {
  20. width: 100%;
  21. height: 100%;
  22. padding: 0;
  23. margin: 0;
  24. }
  25. .main {
  26. width: 100%;
  27. height: 100%;
  28. text-align: center;
  29. -webkit-transition: .5s linear all;
  30. transition: .5s linear all;
  31. }
  32. .main.active {
  33. background: -webkit-radial-gradient(circle, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, .3)); /* Safari 5.1 - 6.0 */
  34. background: radial-gradient(circle, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, .3)); /* 标准的语法 */
  35. }
  36. .block {
  37. top: 50%;
  38. position: relative;
  39. -webkit-transform: translateY(-50%);
  40. transform: translateY(-50%);
  41. }
  42. .main.active .info {
  43. display: none;
  44. }
  45. .title1 {
  46. font-size: 18px;
  47. color: #333;
  48. }
  49. .title2 {
  50. font-size: 16px;
  51. padding-top: 10px;
  52. color: #666;
  53. }
  54. .info{
  55. padding-bottom: 32px;
  56. }
  57. #building {
  58. background-image: url(data:image/png;base64,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);
  59. background-position: center;
  60. width: 200px;
  61. height: 200px;
  62. margin: auto;
  63. }
  64. .main.active #building {
  65. display: none;
  66. }
  67. /**动画效果***/
  68. #animation {
  69. animation: flight 3s ease-in-out 0s infinite alternate none;
  70. -webkit-animation: flight 3s ease-in-out 0s infinite alternate none;
  71. position: relative;
  72. width: 50%;
  73. height: 200px;
  74. left: 16%;
  75. z-index: 100;
  76. display: none;
  77. -webkit-transform: scale(0.5, 0.5);
  78. transform: scale(0.5, 0.5);
  79. }
  80. .main.active #animation {
  81. display: block;
  82. }
  83. .spaceship {
  84. position: absolute;
  85. -webkit-transform: scale(0.5) rotate(45deg);
  86. -moz-transform: scale(0.5) rotate(45deg);
  87. -ms-transform: scale(0.5) rotate(45deg);
  88. -o-transform: scale(0.5) rotate(45deg);
  89. transform: scale(0.5) rotate(45deg);
  90. top: 20%;
  91. left: 65%
  92. }
  93. .spaceship .body {
  94. width: 300px;
  95. height: 300px;
  96. margin-top: -150px;
  97. margin-left: -150px;
  98. border-radius: 300px;
  99. position: absolute;
  100. box-shadow: -33px -33px 0 rgba(228, 230, 234, .6) inset;
  101. background-color: rgba(235, 236, 240, 1);
  102. -webkit-transform: scale(0.46, 1);
  103. -moz-transform: scale(0.46, 1);
  104. -ms-transform: scale(0.46, 1);
  105. -o-transform: scale(0.46, 1);
  106. transform: scale(0.46, 1);
  107. overflow: hidden
  108. }
  109. .spaceship .body:before {
  110. content: "";
  111. position: absolute;
  112. width: 100%;
  113. height: 285px;
  114. background-color: rgba(255, 153, 145, 1);
  115. border-radius: 300px;
  116. -webkit-transform: scale(0.9, .46);
  117. -moz-transform: scale(0.9, .46);
  118. -ms-transform: scale(0.9, .46);
  119. -o-transform: scale(0.9, .46);
  120. transform: scale(0.9, .46);
  121. margin-top: -180px
  122. }
  123. .spaceship .window {
  124. width: 40px;
  125. height: 40px;
  126. margin-top: -40px;
  127. margin-left: -26px;
  128. border: 6px solid rgba(215, 216, 220, 1);
  129. background-color: rgba(245, 246, 255, 1);
  130. overflow: hidden;
  131. position: absolute;
  132. border-radius: 40px
  133. }
  134. .spaceship .window:before, .spaceship .window:after {
  135. width: 5px;
  136. height: 60px;
  137. position: absolute;
  138. content: "";
  139. margin-left: 16px;
  140. margin-top: -5px;
  141. -webkit-transform: rotate(45deg);
  142. -moz-transform: rotate(45deg);
  143. -ms-transform: rotate(45deg);
  144. -o-transform: rotate(45deg);
  145. transform: rotate(45deg);
  146. background-color: #fff;
  147. opacity: .5
  148. }
  149. .spaceship .window:before {
  150. margin-top: 10px
  151. }
  152. .spaceship .fins {
  153. position: absolute;
  154. margin-top: -60px;
  155. z-index: -1
  156. }
  157. .spaceship .fins:before, .spaceship .fins:after {
  158. content: "";
  159. position: absolute;
  160. border-color: rgba(255, 153, 145, 1);
  161. height: 30px;
  162. border-top: 140px solid transparent;
  163. border-bottom: 20px solid transparent
  164. }
  165. .spaceship .fins:before {
  166. border-right: 100px solid rgba(255, 153, 145, 1);
  167. margin-left: -100px
  168. }
  169. .spaceship .fins:after {
  170. border-left: 100px solid rgba(255, 153, 145, 1)
  171. }
  172. .spaceship .antenna {
  173. position: absolute;
  174. background-color: rgba(235, 236, 240, 1);
  175. margin-top: -200px;
  176. margin-left: -2px;
  177. top: 50%;
  178. left: 50%;
  179. width: 4px;
  180. height: 60px
  181. }
  182. .spaceship .antenna:before {
  183. width: 16px;
  184. height: 16px;
  185. content: "";
  186. background-color: rgba(235, 236, 240, 1);
  187. box-shadow: -3px -3px 0 rgba(225, 226, 230, 1) inset;
  188. position: absolute;
  189. border-radius: 16px;
  190. margin-top: -8px;
  191. margin-left: -6px
  192. }
  193. .spaceship .rocket {
  194. width: 60px;
  195. height: 10px;
  196. position: absolute;
  197. border-top: 30px solid rgba(130, 134, 138, 1);
  198. border-right: 10px solid transparent;
  199. border-left: 10px solid transparent;
  200. margin-top: 120px;
  201. margin-left: -40px
  202. }
  203. .spaceship .rocket:before {
  204. background-color: rgba(130, 134, 138, 1);
  205. margin-top: -70px;
  206. margin-left: -10px;
  207. position: absolute;
  208. content: "";
  209. border-radius: 80px;
  210. -webkit-transform: scale(1, .25);
  211. -moz-transform: scale(1, .25);
  212. -ms-transform: scale(1, .25);
  213. -o-transform: scale(1, .25);
  214. transform: scale(1, .25);
  215. width: 80px;
  216. height: 80px
  217. }
  218. .spaceship .rocket:after {
  219. background-color: rgba(120, 124, 128, 1);
  220. margin-top: -30px;
  221. position: absolute;
  222. content: "";
  223. border-radius: 80px;
  224. -webkit-transform: scale(1, .15);
  225. -moz-transform: scale(1, .15);
  226. -ms-transform: scale(1, .15);
  227. -o-transform: scale(1, .15);
  228. transform: scale(1, .15);
  229. width: 60px;
  230. height: 60px
  231. }
  232. .spaceship .fireWrapper {
  233. position: absolute;
  234. overflow: hidden;
  235. border-radius: 60px;
  236. width: 60px;
  237. height: 500px;
  238. margin-top: -66px;
  239. margin-left: -30px;
  240. z-index: 100;
  241. -webkit-transform: scale(1, .15);
  242. -moz-transform: scale(1, .15);
  243. -ms-transform: scale(1, .15);
  244. -o-transform: scale(1, .15);
  245. transform: scale(1, .15)
  246. }
  247. .fire {
  248. position: absolute;
  249. margin-top: 140px;
  250. width: 60px;
  251. height: 60px;
  252. opacity: .9;
  253. -webkit-transform: scale(1, 6.67);
  254. -moz-transform: scale(1, 6.67);
  255. -ms-transform: scale(1, 6.67);
  256. -o-transform: scale(1, 6.67);
  257. transform: scale(1, 6.67)
  258. }
  259. .fire div {
  260. position: absolute;
  261. -webkit-transform-origin: top center;
  262. transform-origin: top center;
  263. border-top: 30px solid rgba(255, 0, 0, 1);
  264. border-left: 25px solid transparent;
  265. border-right: 25px solid transparent;
  266. opacity: 0
  267. }
  268. .fire div:nth-of-type(1) {
  269. animation: fire .35s linear 0s infinite alternate none;
  270. -webkit-animation: fire .35s linear 0s infinite alternate none;
  271. opacity: .8;
  272. margin-left: 5px;
  273. border-top-color: rgba(255, 190, 100, 1);
  274. border-top-width: 50px;
  275. z-index: -1
  276. }
  277. .fire div:nth-of-type(2) {
  278. animation: fire .38s linear -.5s infinite alternate none;
  279. -webkit-animation: fire .38s linear -.5s infinite alternate none;
  280. opacity: .8;
  281. margin-left: 16px;
  282. border-top-color: rgba(255, 140, 100, 1);
  283. border-top-width: 40px;
  284. z-index: 0
  285. }
  286. .fire div:nth-of-type(3) {
  287. animation: fire .4s linear -1s infinite alternate none;
  288. -webkit-animation: fire .4s linear -1s infinite alternate none;
  289. opacity: .8;
  290. margin-left: -6px;
  291. border-top-color: rgba(255, 160, 100, 1);
  292. border-top-width: 30px;
  293. z-index: 1
  294. }
  295. .fire div:nth-of-type(4) {
  296. animation: fire .55s linear -1.2s infinite alternate none;
  297. -webkit-animation: fire .55s linear -1.2s infinite alternate none;
  298. opacity: .8;
  299. margin-left: 9px;
  300. border-left-width: 20px;
  301. border-right-width: 20px;
  302. border-top-color: rgba(255, 200, 100, 1);
  303. border-top-width: 50px;
  304. z-index: -1
  305. }
  306. .fire div:nth-of-type(5) {
  307. animation: fire .25s linear -1.2s infinite alternate none;
  308. -webkit-animation: fire .25s linear -1.2s infinite alternate none;
  309. opacity: .8;
  310. margin-left: 14px;
  311. border-left-width: 25px;
  312. border-right-width: 25px;
  313. border-top-color: rgba(255, 220, 100, 1);
  314. border-top-width: 35px;
  315. z-index: 2
  316. }
  317. .fire div:nth-of-type(6) {
  318. animation: fire .25s linear -1.2s infinite alternate none;
  319. -webkit-animation: fire .25s linear -1.2s infinite alternate none;
  320. opacity: .8;
  321. margin-left: -6px;
  322. border-left-width: 25px;
  323. border-right-width: 25px;
  324. border-top-color: rgba(255, 230, 110, 1);
  325. border-top-width: 35px;
  326. z-index: 2
  327. }
  328. @keyframes fire {
  329. 100% {
  330. -webkit-transform: skew(30deg);
  331. -moz-transform: skew(30deg);
  332. -ms-transform: skew(30deg);
  333. -o-transform: skew(30deg)
  334. }
  335. 74% {
  336. -webkit-transform: skew(-15deg);
  337. -moz-transform: skew(-15deg);
  338. -ms-transform: skew(-15deg);
  339. -o-transform: skew(-15deg);
  340. transform: skew(-15deg)
  341. }
  342. 58% {
  343. -webkit-transform: skew(10deg);
  344. -moz-transform: skew(10deg);
  345. -ms-transform: skew(10deg);
  346. -o-transform: skew(10deg);
  347. transform: skew(10deg)
  348. }
  349. 30% {
  350. -webkit-transform: skew(-35deg);
  351. -moz-transform: skew(-35deg);
  352. -ms-transform: skew(-35deg);
  353. -o-transform: skew(-35deg);
  354. transform: skew(-35deg)
  355. }
  356. 0% {
  357. -webkit-transform: skew(25deg);
  358. -moz-transform: skew(25deg);
  359. -ms-transform: skew(25deg);
  360. -o-transform: skew(25deg);
  361. transform: skew(25deg)
  362. }
  363. }
  364. @-webkit-keyframes fire {
  365. 100% {
  366. -webkit-transform: skew(30deg);
  367. -moz-transform: skew(30deg);
  368. -ms-transform: skew(30deg);
  369. -o-transform: skew(30deg)
  370. }
  371. 74% {
  372. -webkit-transform: skew(-15deg);
  373. -moz-transform: skew(-15deg);
  374. -ms-transform: skew(-15deg);
  375. -o-transform: skew(-15deg);
  376. transform: skew(-15deg)
  377. }
  378. 58% {
  379. -webkit-transform: skew(10deg);
  380. -moz-transform: skew(10deg);
  381. -ms-transform: skew(10deg);
  382. -o-transform: skew(10deg);
  383. transform: skew(10deg)
  384. }
  385. 30% {
  386. -webkit-transform: skew(-35deg);
  387. -moz-transform: skew(-35deg);
  388. -ms-transform: skew(-35deg);
  389. -o-transform: skew(-35deg);
  390. transform: skew(-35deg)
  391. }
  392. 0% {
  393. -webkit-transform: skew(25deg);
  394. -moz-transform: skew(25deg);
  395. -ms-transform: skew(25deg);
  396. -o-transform: skew(25deg);
  397. transform: skew(25deg)
  398. }
  399. }
  400. @keyframes flight {
  401. 100% {
  402. -webkit-transform: translate(40px, 60px) rotate(-4deg);
  403. -moz-transform: translate(40px, 60px);
  404. -ms-transform: translate(40px, 60px);
  405. -o-transform: translate(40px, 60px);
  406. transform: translate(40px, 60px)
  407. }
  408. 66% {
  409. -webkit-transform: translate(-30px, -50px) rotate(5deg);
  410. -moz-transform: translate(-30px, -50px) rotate(5deg);
  411. -ms-transform: translate(-30px, -50px) rotate(5deg);
  412. -o-transform: translate(-30px, -50px) rotate(5deg);
  413. transform: translate(-30px, -50px) rotate(5deg)
  414. }
  415. 36% {
  416. -webkit-transform: translate(50px, 40px) rotate(-6deg);
  417. -moz-transform: translate(50px, 40px) rotate(-6deg);
  418. -ms-transform: translate(50px, 40px) rotate(-6deg);
  419. -o-transform: translate(50px, 40px) rotate(-6deg);
  420. transform: translate(50px, 40px) rotate(-6deg)
  421. }
  422. 0% {
  423. -webkit-transform: translate(-40px, -30px) rotate(5deg);
  424. -moz-transform: translate(-40px, -30px) rotate(5deg);
  425. -ms-transform: translate(-40px, -30px) rotate(5deg);
  426. -o-transform: translate(-40px, -30px) rotate(5deg);
  427. transform: translate(-40px, -30px) rotate(5deg)
  428. }
  429. }
  430. @-webkit-keyframes flight {
  431. 100% {
  432. -webkit-transform: translate(40px, 60px) rotate(-4deg);
  433. -moz-transform: translate(40px, 60px);
  434. -ms-transform: translate(40px, 60px);
  435. -o-transform: translate(40px, 60px);
  436. transform: translate(40px, 60px)
  437. }
  438. 66% {
  439. -webkit-transform: translate(-30px, -50px) rotate(5deg);
  440. -moz-transform: translate(-30px, -50px) rotate(5deg);
  441. -ms-transform: translate(-30px, -50px) rotate(5deg);
  442. -o-transform: translate(-30px, -50px) rotate(5deg);
  443. transform: translate(-30px, -50px) rotate(5deg)
  444. }
  445. 36% {
  446. -webkit-transform: translate(50px, 40px) rotate(-6deg);
  447. -moz-transform: translate(50px, 40px) rotate(-6deg);
  448. -ms-transform: translate(50px, 40px) rotate(-6deg);
  449. -o-transform: translate(50px, 40px) rotate(-6deg);
  450. transform: translate(50px, 40px) rotate(-6deg)
  451. }
  452. 0% {
  453. -webkit-transform: translate(-40px, -30px) rotate(5deg);
  454. -moz-transform: translate(-40px, -30px) rotate(5deg);
  455. -ms-transform: translate(-40px, -30px) rotate(5deg);
  456. -o-transform: translate(-40px, -30px) rotate(5deg);
  457. transform: translate(-40px, -30px) rotate(5deg)
  458. }
  459. }
  460. </style>
  461. </head>
  462. <body>
  463. <div class="main">
  464. <div class="block">
  465. <div class="info">
  466. <div class="title1">系统升级维护中,请稍后访问</div>
  467. <div class="title2">投硬币不受影响^_^</div>
  468. </div>
  469. <div id="building" onclick="buildingClick()"></div>
  470. <div id="animation" onclick="animationClick()">
  471. <a href="#" title="点击了解更多">
  472. <div class="spaceship">
  473. <div class="antenna"></div>
  474. <div class="body"></div>
  475. <div class="window"></div>
  476. <div class="fins"></div>
  477. <div class="rocket"></div>
  478. <div class="fireWrapper">
  479. <div class="fire">
  480. <div></div>
  481. <div></div>
  482. <div></div>
  483. <div></div>
  484. <div></div>
  485. <div></div>
  486. </div>
  487. </div>
  488. </div>
  489. </a>
  490. </div>
  491. </div>
  492. </div>
  493. <script>
  494. function buildingClick(){
  495. document.querySelectorAll('.main')[0].classList.add('active')
  496. }
  497. function animationClick(){
  498. document.querySelectorAll('.main')[0].classList.remove('active')
  499. }
  500. </script>
  501. </body>
  502. </html>