CSS加载动画1

坏坏越2024-06-23 9:58

3个圈圈加载的动画

CSS结构

javascript 复制代码

  #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结构

javascript 复制代码

<!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：水平偏移量为 0，即阴影不水平偏移。

2em：垂直偏移量为 2em，即阴影向下偏移 2em。

0：模糊半径为 0，即阴影不具备模糊效果。

-2em：阴影扩展为 -2em，表示阴影的尺寸为负值，实际上会向内缩小阴影的大小。

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