Vue3初始化加载loading

原创已于 2022-08-17 13:38:23 修改 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

于 2022-08-17 10:37:13 首次发布

Vue3 同时被 3 个专栏收录

17 篇文章

订阅专栏

Typescript

10 篇文章

订阅专栏

Vite2.0

7 篇文章

订阅专栏

这篇博客探讨了如何使用CSS进行微调，以优化网页样式。文章通过一个加载动画的例子展示了CSS的关键帧动画（@keyframes）和过渡效果，详细解释了如何创建和应用这些效果。此外，还强调了CSS在网页布局中的重要性，如flexbox布局和相对定位。

在这里插入图片描述

cv微调样式即可，原理自行研究。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
      <style>
        html,
        body,
        #app {
          width: 100%;
          height: 100%;
          display: flex;
          position: relative;
          justify-content: center;
          align-items: center;
          overflow: hidden;
        }

        .loader,
        .loader:before,
        .loader:after {
          border-radius: 50%;
          width: 2.5em;
          height: 2.5em;
          -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
          -webkit-animation: loadAnimation 1.8s infinite ease-in-out;
          animation: loadAnimation 1.8s infinite ease-in-out;
        }

        .loader {
          color: #406eeb;
          font-size: 10px;
          margin: 80px auto;
          position: relative;
          text-indent: -9999em;
          -webkit-transform: translateZ(0);
          -ms-transform: translateZ(0);
          transform: translateZ(0);
          -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
          top: 0;
          transform: translate(-50%, 0);
        }

        .loader:before,
        .loader:after {
          content: '';
          position: absolute;
          top: 0;
        }

        .loader:before {
          left: -3.5em;
          -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
        }

        .loader:after {
          left: 3.5em;
        }

        @-webkit-keyframes loadAnimation {
          0%,
          80%,
          100% {
            box-shadow: 0 2.5em 0 -1.3em;
          }

          40% {
            box-shadow: 0 2.5em 0 0;
          }
        }

        @keyframes loadAnimation {
          0%,
          80%,
          100% {
            box-shadow: 0 2.5em 0 -1.3em;
          }

          40% {
            box-shadow: 0 2.5em 0 0;
          }
        }
      </style>
      <div class="loader"></div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>