1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title>form-generator</title>
- <style>
- .pre-loader {
- position: absolute;
- top: calc(50% - 32px);
- left: calc(50% - 32px);
- width: 64px;
- height: 64px;
- border-radius: 50%;
- perspective: 800px;
- }
- .pre-loader .inner {
- position: absolute;
- box-sizing: border-box;
- width: 100%;
- height: 100%;
- border-radius: 50%;
- }
- .pre-loader .inner.one {
- left: 0%;
- top: 0%;
- -webkit-animation: rotate-one 1s linear infinite;
- animation: rotate-one 1s linear infinite;
- border-bottom: 3px solid #bc9048;
- }
- .pre-loader .inner.two {
- right: 0%;
- top: 0%;
- -webkit-animation: rotate-two 1s linear infinite;
- animation: rotate-two 1s linear infinite;
- border-right: 3px solid #74aeff;
- }
- .pre-loader .inner.three {
- right: 0%;
- bottom: 0%;
- -webkit-animation: rotate-three 1s linear infinite;
- animation: rotate-three 1s linear infinite;
- border-top: 3px solid #caef74;
- }
- @keyframes rotate-one {
- 0% {
- -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
- transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
- }
- 100% {
- -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
- transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
- }
- }
- @keyframes rotate-two {
- 0% {
- -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
- transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
- }
- 100% {
- -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
- transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
- }
- }
- @keyframes rotate-three {
- 0% {
- -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
- transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
- }
- 100% {
- -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
- transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
- }
- }
- </style>
- <link href="https://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
- <link href="https://lib.baomitu.com/monaco-editor/0.19.3/min/vs/editor/editor.main.css" rel="stylesheet">
- <script src="https://lib.baomitu.com/vue/2.6.11/vue<%= process.env.NODE_ENV === 'production' ? '.min' : ''%>.js"></script>
- <script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
- <script src="https://lib.baomitu.com/element-ui/2.13.2/index.js"></script>
- </head>
- <body>
- <noscript>
- <strong>抱歉,javascript被禁用,请开启后重试。</strong>
- </noscript>
- <div id="app"></div>
- <div class="pre-loader" id="pre-loader">
- <div class="inner one"></div>
- <div class="inner two"></div>
- <div class="inner three"></div>
- </div>
- </body>
- </html>
|