master

分支 (5)

标签 (1)

管理

管理

master

deploy

new-master

master-backup

main

v0.5

formDesigner3
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>formDesigner3</title>
    <style>
      body{
        margin:0px
      }
      .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>
  </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>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>