总结一些css加载动画

Posted 2020-09-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了总结一些css加载动画相关的知识，希望对你有一定的参考价值。

技术分享

<!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>Document</title>
</head>
<body>
    <div id="preloader_1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <style media="screen">
    #preloader_1{
        margin: 300px;
        position:relative;
    }
    #preloader_1 span{
        display:block;
        bottom:0px;
        width: 9px;
        height: 5px;
        background:#9b59b6;
        position:absolute;
        animation: preloader_1 1.5s  infinite ease-in-out;
    }
    #preloader_1 span:nth-child(2){
        left:11px;
        animation-delay: .2s;
    }
    #preloader_1 span:nth-child(3){
        left:22px;
        animation-delay: .4s;
    }
    #preloader_1 span:nth-child(4){
        left:33px;
        animation-delay: .6s;
    }
    #preloader_1 span:nth-child(5){
        left:44px;
        animation-delay: .8s;
    }
    @keyframes preloader_1 {
        0% {height:5px;transform:translateY(0px);background:#9b59b6;}
        25% {height:30px;transform:translateY(15px);background:#3498db;}
        50% {height:5px;transform:translateY(0px);background:#9b59b6;}
        100% {height:5px;transform:translateY(0px);background:#9b59b6;}
    }
    </style>
</body>
</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>Document</title>
</head>
<body>
    <div id="preloader_2">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <style media="screen">
    #preloader_2 { position: relative; left: 50%; width: 40px; height: 40px; }
    #preloader_2 span { display: block; bottom: 0px; width: 20px; height: 20px; background: #9b59b6; position: absolute; }
    #preloader_2 span:nth-child(1) { animation: preloader_2_1 1.5s infinite ease-in-out; }
    #preloader_2 span:nth-child(2) { left: 20px; animation: preloader_2_2 1.5s infinite ease-in-out; }
    #preloader_2 span:nth-child(3) { top: 0px; animation: preloader_2_3 1.5s infinite ease-in-out; }
    #preloader_2 span:nth-child(4) { top: 0px; left: 20px; animation: preloader_2_4 1.5s infinite ease-in-out; }
    @keyframes preloader_2_1 {
        0% {
            -transform: translateX(0px) translateY(0px) rotate(0deg);
            webkit-transform:translateX(0px) translateY(0px) rotate(0deg);
            border-radius:0px;
        }
        50% {
            -transform: translateX(-20px) translateY(-10px) rotate(-180deg);
            webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
            border-radius:20px;
            background:#3498db;
        }
        80% {
            -transform: translateX(0px) translateY(0px) rotate(-360deg);
            webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);
            border-radius:0px;
        }
        100% {
            -transform: translateX(0px) translateY(0px) rotate(-360deg);
            webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);
            border-radius:0px;
        }
    }
    @keyframes preloader_2_2 {
        0% {
            -transform: translateX(0px) translateY(0px) rotate(0deg);
            border-radius:0px;
        }
        50% {
            -transform: translateX(20px) translateY(-10px) rotate(180deg);
            border-radius:20px;
            background:#f1c40f;
        }
        80% {
            -transform: translateX(0px) translateY(0px) rotate(360deg);
            border-radius:0px;
        }
        100% {
            -transform: translateX(0px) translateY(0px) rotate(360deg);
            border-radius:0px;
        }
    }
    @keyframes preloader_2_3 {
        0% {
            -transform: translateX(0px) translateY(0px) rotate(0deg);
            border-radius:0px;
        }
        50% {
            -transform: translateX(-20px) translateY(10px) rotate(-180deg);
            border-radius:20px;
            background:#2ecc71;
        }
        80% {
            -transform: translateX(0px) translateY(0px) rotate(-360deg);
            border-radius:0px;
        }
        100% {
            -transform: translateX(0px) translateY(0px) rotate(-360deg);
            border-radius:0px;
        }
    }
    @keyframes preloader_2_4 {
        0% {
            -transform: translateX(0px) translateY(0px) rotate(0deg);
            border-radius:0px;
        }
        50% {
            -transform: translateX(20px) translateY(10px) rotate(180deg);
            border-radius:20px;
            background:#e74c3c;
        }
        80% {
            -transform: translateX(0px) translateY(0px) rotate(360deg);
            border-radius:0px;
        }
        100% {
            -transform: translateX(0px) translateY(0px) rotate(360deg);
            border-radius:0px;
        }
    }
    </style>
</body>
</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>Document</title>
</head>
<body>
    <div id="preloader_3"></div>
    <style media="screen">
    #preloader_3{
        margin: 300px;
position:relative;
}
#preloader_3:before{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:‘‘;
position:absolute;
background:#9b59b6;
animation: preloader_3_before 1.5s infinite ease-in-out;
}

#preloader_3:after{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:‘‘;
position:absolute;
background:#2ecc71;
left:22px;
animation: preloader_3_after 1.5s infinite ease-in-out;
}
@keyframes preloader_3_before {
0% {transform: translateX(0px) rotate(0deg)}
50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
  100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
0% {transform: translateX(0px)}
50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100% {transform: translateX(0px)}
}
    </style>
</body>
</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>Document</title>
</head>
<body>
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
    <style media="screen">
    .spinner {
margin: 100px auto 0;
width: 150px;
text-align: center;
}

.spinner > div {
width: 30px;
height: 30px;
background-color: #67CF22;

border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
    </style>
</body>
</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>Document</title>
</head>
<body>
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
    <style media="screen">
    .spinner {
width: 60px;
height: 60px;

position: relative;
margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #67CF22;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;

-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
    </style>
</body>
</html>

以上是关于总结一些css加载动画的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段7——CSS动画

如何使用事件侦听器来加载动画片段的循环

「HTML+CSS」--自定义加载动画043

「HTML+CSS」--自定义加载动画044

「HTML+CSS」--自定义加载动画029