css加载中动画

最新推荐文章于 2025-04-24 10:53:03 发布

永远的WEB小白

最新推荐文章于 2025-04-24 10:53:03 发布

阅读量420

点赞数 1

分类专栏： css 文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_39339179/article/details/141322361

版权

css 专栏收录该内容

11 篇文章

订阅专栏

<!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>