css3-扁平预加载动画效果

css3-扁平预加载动画效果

html:

    <section class="container">
        <span></span>
        <span></span>
        <span></span>
    </section>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            /* 网格布局 */
            display: grid;
            justify-content: center;
            align-content: center;
            background-color: #fff;
        }
        .container{
            position: relative;
        }
        .container span{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            transform-origin: center center;
            border: 6px solid #b71c1c;
            border-radius: 50%;
        }
        /* 第1个圆，底边框设置透明 */
        .container span:nth-child(1){
            width: 100px;
            height: 100px;
            border-bottom: 6px solid transparent;
            animation: animate-max 2s linear infinite;
        }
        /* 第2个圆，上边框设置透明 */
        .container span:nth-child(2){
            width: 60px;
            height: 60px;
            border-top: 6px solid transparent;
            animation: animate 1s linear infinite;
        }
        /* 第3个圆，底边框设置透明 */
        .container span:nth-child(3){
            width: 20px;
            height: 20px;
            border-bottom: 6px solid transparent;
            animation: animate 1s linear infinite;
        }
        @keyframes animate{
            0%{
                transform: translate(-50%,-50%) rotateZ(0deg);
            }
            100%{
                transform: translate(-50%,-50%) rotateZ(360deg);
            }
        }
        @keyframes animate-max{
            0%{
                transform: translate(-50%,-50%) rotateZ(0deg);
            }
            100%{
                transform: translate(-50%,-50%) rotateZ(360deg);
            }
        }
    </style>