CSS加载动画1-CFANZ编程社区

CSS加载动画1

杰森wang 2024-06-24 阅读 39

3个圈圈加载的动画

CSS结构

  #app-loading {
        position: relative;
        top: 45vh;
        margin: 0 auto;
        color: #409eff;
        font-size: 12px;
      }

      #app-loading,
      #app-loading::before,
      #app-loading::after {
        width: 2em;
        height: 2em;
        border-radius: 50%;
        animation: 2s ease-in-out infinite app-loading-animation;
      }

      #app-loading::before,
      #app-loading::after {
        content: '';
        position: absolute;
      }

      #app-loading::before {
        left: -4em;
        animation-delay: -0.2s;
      }

      #app-loading::after {
        left: 4em;
        animation-delay: 0.2s;
      }

      @keyframes app-loading-animation {
        0%,
        80%,
        100% {
          box-shadow: 0 2em 0 -2em;
        }
        40% {
          box-shadow: 0 2em 0 0;
        }
      }

html结构

<!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" />
    <link rel="stylesheet" href="/public/app-loading.css" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
      <div id="app-loading">
        <script>
          debugger
        </script>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

box-shadow

用控制内阴影的方法使得圆形消失出现

0 条评论