123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- <!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>绘开发</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/monaco-editor/0.19.3/min/vs/editor/editor.main.css" rel="stylesheet">
- <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>
|