CSS加载动画1

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,表示阴影的尺寸为负值,实际上会向内缩小阴影的大小。

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

相关推荐
中微子1 分钟前
在本地使用大模型(Ollama + Next.js App Router)
前端
龙在天2 分钟前
提交时,Husky 和 ESLint 自动帮我们检查代码
前端
K仔2 分钟前
网页截图的三种方式对比
前端
智能砖头3 分钟前
MCP在开发中如何提效
前端·后端
秋难降5 分钟前
零基础学习SQL(九)——存储引擎
前端·sql·mysql
白菜豆腐花6 分钟前
vue3实现防抖hook
前端·vue.js
huabuyu7 分钟前
小程序虚拟列表与无限下拉实践
前端
秋天的一阵风7 分钟前
前端截图方案实战:snapdom 与 html2canvas 的深度对比
前端·javascript·vue.js
干翻秋招7 分钟前
Js中的隐式类型转换
前端
uhakadotcom8 分钟前
302跳转和301跳转有啥区别?
前端·面试·github