CSS3 自定义 loader 加载

最新推荐文章于 2022-06-17 12:51:16 发布

_格鲁特宝宝

最新推荐文章于 2022-06-17 12:51:16 发布

阅读量246

点赞数

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/GrootBaby/article/details/89332727

版权

Web FrontEnd 同时被 2 个专栏收录

226 篇文章 5 订阅

订阅专栏

CSS

26 篇文章 0 订阅

订阅专栏

<div class="myloader">
    <div class="loader">
        <div class="dot dot1"></div>
        <div class="dot dot2"></div>
        <div class="dot dot3"></div>
    </div>
</div>

.myloader {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
}
.loader {
    width: 8%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.loader .dot {
    width: 0.16rem;
    height: 0.16rem;
    background: #4cbbff;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 5px);
}

.loader .dot1 {
    left: 0px;
    -webkit-animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    animation: dot-jump 0.5s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
}

.loader .dot2 {
    left: 0.4rem;
    -webkit-animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    animation: dot-jump 0.5s 0.2s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
}

.loader .dot3 {
    left: 0.8rem;
    -webkit-animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
    animation: dot-jump 0.5s 0.4s cubic-bezier(0.77, 0.47, 0.64, 0.28) alternate infinite;
}

 @-webkit-keyframes dot-jump {
     0% {
         -webkit-transform: translateY(0);
         transform: translateY(0);
     }

     100% {
         -webkit-transform: translateY(-0.3rem);
         transform: translateY(-0.3rem);
     }
 }

 @-moz-keyframes dot-jump {
     0% {
         -webkit-transform: translateY(0);
         -moz-transform: translateY(0);
         transform: translateY(0);
     }

     100% {
         -webkit-transform: translateY(-0.3rem);
         -moz-transform: translateY(-0.3rem);
         transform: translateY(-0.3rem);
     }
 }

 @keyframes dot-jump {
     0% {
         -webkit-transform: translateY(0);
         -moz-transform: translateY(0);
         transform: translateY(0);
     }

     100% {
         -webkit-transform: translateY(-0.3rem);
         -moz-transform: translateY(-0.3rem);
         transform: translateY(-0.3rem);
     }
 }