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

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

相关推荐
太阳伞下的阿呆3 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny3 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴4 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔4 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔4 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔4 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6145 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止5 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军5 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安6 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js