Skip to content

基
基于vue的头像自动生成器

写代码就手抖 / 基于vue的头像自动生成器
与 Fork 源项目一致

Fork自 虎纹鲨鱼 / avatar

通知 1
Star 0
Fork 0
基
基于vue的头像自动生成器

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
index.html 2.0 KB
Newer Older
L
first commit  
LeoKu 已提交
1 2 3 4 5 6 
<!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" />
L
feat: improve SEO  
LeoKu 已提交
7 
    <meta name="description" content="A pure front-end avatar generator" />
L
first commit  
LeoKu 已提交
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 
    <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>