loading 动画效果

最新推荐文章于 2025-01-10 09:27:10 发布

清风浊酒

最新推荐文章于 2025-01-10 09:27:10 发布

阅读量471

点赞数

html 部分

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>loading</title> <link rel="stylesheet" href="demo.css"> </head> <body> <div class="wrapper"> <div class="logo">loading</div> <div class="dots animate" id="dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> </div>  <script src="demo.js"></script> </body> </html>
css部分

*{
    margin:0;
    padding:0;
}
.wrapper{
    width:100%;
    height:1000px;
    background: linear-gradient(45deg,#6fc7b5 0%,#13bdce, 20%,#0094d9 40%, #5a3694 60%, #ee4d74 80%, #f58c58 100%);
    background-size: 400%;
    /* 左下角 */
    background-position:0% 100%;
    position:relative;
    animation:gradient 7.5s ease-in-out infinite;
}
.wrapper *{
    left:50%;
    top:50%;
    position:fixed;
    transform: translate3d(-50%,-50%,0) rotate(0deg);
}
.logo{
    color:#fff;
    font-size: 30px;
    font-weight:bolder;
}
.wrapper .dots.animate .dot{
    animation:loading-block 2.5s ease-in-out 1;
}
.wrapper .dots.animate .dot:after{
    animation:loading-dot 2.5s ease-in-out 1;
}
.wrapper .dots .dot{
    height:300px;
    width:300px;
}
.wrapper .dots .dot:after{
    content:"";
    display:inline-block;
    width:60px;
    height:60px;
    background-color:#fff;
    border-radius:50%;
    position:absolute;
    transform: scale(0.17);
}
.wrapper .dots .dot:nth-child(1) {
    top: 129px;
    left:-197px;
    animation-delay: 0s;
}
.wrapper .dots .dot:nth-child(1):after {
    transform-origin: top right;
    top: 0;
    right: 0;
    animation-delay: 0s;
}
.wrapper .dots .dot:nth-child(2) {
    top:-142px;
    left:-183px;
    animation-delay:0.25s;
}
.wrapper .dots .dot:nth-child(2):after{
    bottom:0;
    right:0;
    transform-origin: bottom right;
    animation-delay:0.25s;    
}
.wrapper .dots .dot:nth-child(3) {
    top:-156px;
    left:-131px;
    animation-delay:0.5s;
}
.wrapper .dots .dot:nth-child(3):after{
    bottom:0;
    right:0;
    transform-origin: bottom right;
    animation-delay:0.5s;    
}
.wrapper .dots .dot:nth-child(4) {
    top:148px;
    left:191px;
    animation-delay:0.75s;
}
.wrapper .dots .dot:nth-child(4):after{
    top:0;
    left:0;
    transform-origin: top left;
    animation-delay:0.75s;    
}
.wrapper .dots .dot:nth-child(5) {
    top:-130px;
    left:180px;
    animation-delay:1s;
}
.wrapper .dots .dot:nth-child(5):after{
    bottom:0;
    left:0;
    transform-origin: bottom left;
    animation-delay:1s;    
}
@keyframes loading-block {
    0% {
        transform: translate3d(-50%,-50%,0) rotate(0deg);        
    }
    100% {
        transform: translate3d(-50%,-50%,0) rotate(360deg);
    }
}
@keyframes loading-dot {
    0% {
        transform:scale(0.17);        
    }
    50% {
        transform:scale(1);
    }
    100% {
        transform:scale(0.17);                
    }
}
@keyframes gradient{
    0% {
        background-position: 0% 100%;
    }
    50% {
        background-position: 100% 0%;
    }
    100% {
        background-position: 0% 100%;        
    }
}

js代码部分

// setInterval(function(){
//     $('.dots').removeClass('animate');
//     setTimeout(function(){
//         $('.dots').addClass('animate');
//     },200)
// },3750);

var dots = document.getElementById('dots');
setInterval(function () {
    dots.classList.remove('animate');
    setTimeout(function () {
        dots.classList.add('animate');
    }, 200);
},3750);