index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Color Avatar</title>

    <style>
      body {
        margin: 0;
      }

      [v-cloak] {
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: hsl(216, 14%, 14%);
      }

      [v-cloak] .placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }

      @keyframes flip {
        0% {
          transform: rotateY(0);
        }

        25% {
          transform: rotateY(180deg);
        }

        50% {
          transform: rotateY(180deg) rotateX(180deg);
        }

        75% {
          transform: rotateY(360deg) rotateX(180deg);
        }

        100% {
          transform: rotateY(360deg) rotateX(360deg);
        }
      }

      [v-cloak] .logo {
        position: relative;
        width: 3rem;
        height: 3rem;
        overflow: hidden;
        background-color: hsl(241, 99%, 70%);
        border-radius: 50%;
        animation: 2s flip infinite;
      }

      [v-cloak] .logo::after {
        position: absolute;
        top: -40%;
        right: -40%;
        width: 100%;
        height: 100%;
        background-color: hsl(186, 84%, 74%);
        border-radius: 50%;
        content: '';
      }

      [v-cloak] .text {
        margin-top: 2rem;
        color: hsl(211, 19%, 70%);
        font-weight: bold;
        font-size: 1rem;
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="placeholder">
        <div class="logo"></div>
        <div class="text">Coming soon...</div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>