css3中，手写loading加载动画

loading加载动画
<!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>
    <style>
        * {
            padding:0;
            margin:0;
        }
        @keyframes loadingFadeDelay {
        0%, 39%, 100% {
            opacity: 0
        }
        40% {
            opacity: 1
        }
        }
        .loading-container {
        position: fixed;
        left:calc(50% - 25px);
        top:calc(50% - 25px);
        width: 25px;
        height: 25px;
        }

        .loading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }

        .loading:before {
        display: block;
        content: ' ';
        margin: 0 auto;
        width: 10%;
        height: 30%;
        background: #aaa;
        animation: loadingFadeDelay 1.2s infinite ease-in-out both; 
        }

        .loading-animation1 {
        transform: rotate(0deg);
        }

        .loading-animation2 {
        transform: rotate(30deg);
        }

        .loading-animation3 {
        transform: rotate(60deg);
        }

        .loading-animation4 {
        transform: rotate(90deg);
        }

        .loading-animation5 {
        transform: rotate(120deg);
        }

        .loading-animation6 {
        transform: rotate(150deg);
        }

        .loading-animation7 {
        transform: rotate(180deg);
        }

        .loading-animation8 {
        transform: rotate(210deg);
        }

        .loading-animation9 {
        transform: rotate(240deg);
        }

        .loading-animation10 {
        transform: rotate(270deg);
        }

        .loading-animation11 {
        transform: rotate(300deg);
        }

        .loading-animation12 {
        transform: rotate(330deg);
        }

        .loading-animation2 { transform: rotate(30deg);}
        .loading-animation3 { transform: rotate(60deg); }
        .loading-animation4 { transform: rotate(90deg);}
        .loading-animation5 { transform: rotate(120deg);}
        .loading-animation6 { transform: rotate(150deg);}
        .loading-animation7 { transform: rotate(180deg);}
        .loading-animation8 { transform: rotate(210deg);}
        .loading-animation9 { transform: rotate(240deg);}
        .loading-animation10 { transform: rotate(270deg); }
        .loading-animation11 { transform: rotate(300deg); }
        .loading-animation12 { transform: rotate(330deg); }
        .loading-animation2:before {animation-delay: -1.1s;}
        .loading-animation3:before {animation-delay: -1s;}
        .loading-animation4:before {animation-delay: -0.9s;}
        .loading-animation5:before {animation-delay: -0.8s;}
        .loading-animation6:before {animation-delay: -0.7s;}
        .loading-animation7:before {animation-delay: -0.6s;}
        .loading-animation8:before {animation-delay: -0.5s;}
        .loading-animation9:before {animation-delay: -0.4s;}
        .loading-animation10:before {animation-delay: -0.3s;}
        .loading-animation11:before {animation-delay: -0.2s;}
        .loading-animation12:before {animation-delay: -0.1s;}
    </style>
</head>
<body>
        <div class='loading-container'>
            <div class='loading loading-animation1'></div>
            <div class='loading loading-animation2'></div>
            <div class='loading loading-animation3'></div>
            <div class='loading loading-animation4'></div>
            <div class='loading loading-animation5'></div>
            <div class='loading loading-animation6'></div>
            <div class='loading loading-animation7'></div>
            <div class='loading loading-animation8'></div>
            <div class='loading loading-animation9'></div>
            <div class='loading loading-animation10'></div>
            <div class='loading loading-animation11'></div>
            <div class='loading loading-animation12'></div>
        </div>
              
</body>
</html>
loading加载动画
css3中，手写loading加载动画

猜你喜欢
