main

分支 (2)

管理

管理

main

dependabot/npm_and_yarn/nanoid-5.0.4

lottery-electron-vite-vue
/
index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抽奖系统</title>
    <style>
      .loading-box {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 500;
        /* background-color: rgba(0, 255, 255, 0.2); */
        background-color: #2980b9;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transition: all 0.4s;
      }
      .ml6 {
        position: relative;
        font-weight: 900;
        font-size: 2.0em;
      }

      .ml6 .text-wrapper {
        position: relative;
        display: inline-block;
        padding-top: 0.2em;
        padding-right: 0.05em;
        padding-bottom: 0.1em;
        overflow: hidden;
      }

      .ml6 .letter {
        display: inline-block;
        line-height: 1em;
        color: #fff;
      }


      .sk-folding-cube {
        margin: 20px auto;
        width: 40px;
        height: 40px;
        position: relative;
        -webkit-transform: rotateZ(45deg);
                transform: rotateZ(45deg);
      }

      .sk-folding-cube .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
                transform: scale(1.1);
      }
      .sk-folding-cube .sk-cube:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
                animation: sk-foldCubeAngle 2.4s infinite linear both;
        -webkit-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
      }
      .sk-folding-cube .sk-cube2 {
        -webkit-transform: scale(1.1) rotateZ(90deg);
                transform: scale(1.1) rotateZ(90deg);
      }
      .sk-folding-cube .sk-cube3 {
        -webkit-transform: scale(1.1) rotateZ(180deg);
                transform: scale(1.1) rotateZ(180deg);
      }
      .sk-folding-cube .sk-cube4 {
        -webkit-transform: scale(1.1) rotateZ(270deg);
                transform: scale(1.1) rotateZ(270deg);
      }
      .sk-folding-cube .sk-cube2:before {
        -webkit-animation-delay: 0.3s;
                animation-delay: 0.3s;
      }
      .sk-folding-cube .sk-cube3:before {
        -webkit-animation-delay: 0.6s;
                animation-delay: 0.6s;
      }
      .sk-folding-cube .sk-cube4:before {
        -webkit-animation-delay: 0.9s;
                animation-delay: 0.9s;
      }
      @-webkit-keyframes sk-foldCubeAngle {
        0%, 10% {
          -webkit-transform: perspective(140px) rotateX(-180deg);
                  transform: perspective(140px) rotateX(-180deg);
          opacity: 0;
        } 25%, 75% {
          -webkit-transform: perspective(140px) rotateX(0deg);
                  transform: perspective(140px) rotateX(0deg);
          opacity: 1;
        } 90%, 100% {
          -webkit-transform: perspective(140px) rotateY(180deg);
                  transform: perspective(140px) rotateY(180deg);
          opacity: 0;
        }
      }

      @keyframes sk-foldCubeAngle {
        0%, 10% {
          -webkit-transform: perspective(140px) rotateX(-180deg);
                  transform: perspective(140px) rotateX(-180deg);
          opacity: 0;
        } 25%, 75% {
          -webkit-transform: perspective(140px) rotateX(0deg);
                  transform: perspective(140px) rotateX(0deg);
          opacity: 1;
        } 90%, 100% {
          -webkit-transform: perspective(140px) rotateY(180deg);
                  transform: perspective(140px) rotateY(180deg);
          opacity: 0;
        }
      }
    </style>

  </head>
  <body>
    <div class="loading-box">
      <div class="sk-folding-cube">
        <div class="sk-cube1 sk-cube"></div>
        <div class="sk-cube2 sk-cube"></div>
        <div class="sk-cube4 sk-cube"></div>
        <div class="sk-cube3 sk-cube"></div>
      </div>
      <h1 class="ml6">
        <span class="text-wrapper">
          <span class="letters">抽奖系统 加载中...</span>
        </span>
      </h1>
    </div>
    <div id="app"></div>
    <script src="/lib/anime.min.js"></script>
    <script>
      // Wrap every letter in a span
     var textWrapper = document.querySelector('.ml6 .letters');
     textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

     anime.timeline({loop: true})
       .add({
         targets: '.ml6 .letter',
         translateY: ["1.1em", 0],
         translateZ: 0,
         duration: 750,
         delay: (el, i) => 50 * i
       }).add({
         targets: '.ml6',
         opacity: 0,
         duration: 1000,
         easing: "easeOutExpo",
         delay: 1000
       });
   </script>
    <link rel="stylesheet" href="/css/introjs.min.css" />
    <script src="/lib/three.min.js"></script>
    <script src="/lib/tween.min.js"></script>
    <script src="/lib/TrackballControls.js"></script>
    <script src="/lib/CSS3DRenderer.js"></script>
    <script src="/lib/ajax.js"></script>
    <script src="/lib/lodash.min.js"></script>
    <script src="/lib/jquery.js"></script>
    <script src="/lib/intro.min.js"></script>
    <script type="module" src="/src/main.ts"></script>
    <script src="/lib/jquery.confetti.js"></script>
  </body>
</html>