css加载中动画

html 复制代码
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<style>
#loader .square:nth-child(5n+1) {
    background: #0F9;
    animation-delay: 0s;
}
#loader .square:nth-child(5n+2) {
    background: #0CF;
    animation-delay: 0.1s;
}
#loader .square:nth-child(5n+3) {
    background: #93F;
    animation-delay: 0.2s;
}
#loader .square:nth-child(5n+4) {
    background: #F66;
    animation-delay: 0.3s;
}
#loader .square:nth-child(5n+5) {
    background: #FFF35C;
    animation-delay: 0.4s;
}

#loader {
    width: 500px;
    position: absolute;
    text-align: center;
    left: calc(50% - 250px);
    top: calc(50% - 10px);
}

#loader .square {
    display: inline-block;
    height: 10px;
    width: 10px;
    margin: 10px;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    animation: wave 1s cubic-bezier(.455,.03,.515,.955) infinite;
}

@keyframes wave {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}
</style>
 </head>
 <body>

  <div id="loader">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
		<div>加载中。。。</div>
    </div>
 </body>
</html>
相关推荐
华仔啊5 小时前
别再纠结Pinia和Vuex了!一篇文章彻底搞懂区别与选择
前端·vue.js
徐同保5 小时前
Redux和@reduxjs/toolkit同时在Next.js项目中使用
开发语言·前端·javascript
~无忧花开~5 小时前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
渣哥5 小时前
Spring Boot 本质揭秘:约定优于配置 + 自动装配
javascript·后端·面试
小九今天不码代码5 小时前
深入理解 CSS 表格布局:table-layout 的秘密与实战详解(附费用报销单案例)
css·前端开发·表格布局·web设计·table-layout·页面优化·样式布局
颜酱5 小时前
了解 pnpm 的优势,然后将已有项目的 yarn 换成 pnpm
前端·javascript·前端工程化
海在掘金611276 小时前
从"鬼知道这对象有啥"到"一目了然" - TS接口的实战魔力
前端
spionbo6 小时前
Vue 模拟键盘组件封装方法与使用技巧详解
前端
泉城老铁6 小时前
springboot 对接发送钉钉消息,消息内容带图片
前端·spring boot·后端
顾青6 小时前
微信小程序 VisionKit 实战(二):静态图片人脸检测与人像区域提取
前端·微信小程序