Skip to content

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

WRVR / 基于vue的头像自动生成器
与 Fork 源项目一致

Fork自 虎纹鲨鱼 / avatar

通知 1
Star 0
Fork 0
基
基于vue的头像自动生成器
切换分支/标签
查找文件 普通视图历史永久链接Permalink
index.html 3.5 KB
Newer Older
6
update:code  
628c9f991a7e4862742d8a2f 已提交
1 2 3 4 5 6 7 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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/dist/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="An online avatar generator just for fun. Made with Vue3 and Vite."
    />
    <meta
      name="keywords"
      content="vector avatar,illustrations,avatar generator,avatar creator,fun avatar,随机头像,卡通头像在线免费生成工具,头像生成器"
    />
    <meta content="dark" name="color-scheme" />

    <meta property="og:title" content="Vue Color Avatar" />
    <meta
      property="og:description"
      content="A front-end only avatar generator"
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://vue-color-avatar.vercel.app/" />
    <meta property="og:image" content="https://i.imgur.com/FIJEI9V.png" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta property="twitter:domain" content="vue-color-avatar.vercel.app" />
    <meta
      property="twitter:url"
      content="https://vue-color-avatar.vercel.app/"
    />
    <meta name="twitter:title" content="Vue Color Avatar" />
    <meta
      name="twitter:description"
      content="A front-end only avatar generator"
    />
    <meta name="twitter:image" content="https://i.imgur.com/FIJEI9V.png" />

    <title>Vue Color Avatar</title>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-B4C9FN5DFR"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag('js', new Date())

      gtag('config', 'G-B4C9FN5DFR')
    </script>

    <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(0.5turn);
        }

        50% {
          transform: rotateY(0.5turn) rotateX(0.5turn);
        }

        75% {
          transform: rotateY(1turn) rotateX(0.5turn);
        }

        100% {
          transform: rotateY(1turn) rotateX(1turn);
        }
      }

      [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>
    <script
      type="module"
      crossorigin
      src="/dist/assets/index.ea6743b0.js"
    ></script>
    <link rel="stylesheet" href="/dist/assets/index.b076906c.css" />
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="placeholder">
        <div class="logo"></div>
        <div class="text">Coming soon...</div>
      </div>
    </div>
  </body>
</html>