index.html 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
  7. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8. <title>form-generator</title>
  9. <style>
  10. .pre-loader {
  11. position: absolute;
  12. top: calc(50% - 32px);
  13. left: calc(50% - 32px);
  14. width: 64px;
  15. height: 64px;
  16. border-radius: 50%;
  17. perspective: 800px;
  18. }
  19. .pre-loader .inner {
  20. position: absolute;
  21. box-sizing: border-box;
  22. width: 100%;
  23. height: 100%;
  24. border-radius: 50%;
  25. }
  26. .pre-loader .inner.one {
  27. left: 0%;
  28. top: 0%;
  29. -webkit-animation: rotate-one 1s linear infinite;
  30. animation: rotate-one 1s linear infinite;
  31. border-bottom: 3px solid #bc9048;
  32. }
  33. .pre-loader .inner.two {
  34. right: 0%;
  35. top: 0%;
  36. -webkit-animation: rotate-two 1s linear infinite;
  37. animation: rotate-two 1s linear infinite;
  38. border-right: 3px solid #74aeff;
  39. }
  40. .pre-loader .inner.three {
  41. right: 0%;
  42. bottom: 0%;
  43. -webkit-animation: rotate-three 1s linear infinite;
  44. animation: rotate-three 1s linear infinite;
  45. border-top: 3px solid #caef74;
  46. }
  47. @keyframes rotate-one {
  48. 0% {
  49. -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  50. transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  51. }
  52. 100% {
  53. -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  54. transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  55. }
  56. }
  57. @keyframes rotate-two {
  58. 0% {
  59. -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  60. transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  61. }
  62. 100% {
  63. -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  64. transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  65. }
  66. }
  67. @keyframes rotate-three {
  68. 0% {
  69. -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  70. transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  71. }
  72. 100% {
  73. -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  74. transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  75. }
  76. }
  77. </style>
  78. <link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
  79. <link href="https://lib.baomitu.com/monaco-editor/0.19.3/min/vs/editor/editor.main.css" rel="stylesheet">
  80. <script src="https://lib.baomitu.com/vue/2.6.11/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js"></script>
  81. <script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
  82. <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
  83. </head>
  84. <body>
  85. <noscript>
  86. <strong>抱歉,javascript被禁用,请开启后重试。</strong>
  87. </noscript>
  88. <div id="app"></div>
  89. <div class="pre-loader" id="pre-loader">
  90. <div class="inner one"></div>
  91. <div class="inner two"></div>
  92. <div class="inner three"></div>
  93. </div>
  94. </body>
  95. </html>