<style>

    #loading {

        position:absolute;

        left:0;

        top:0;

        width:100%;

        height:100%;

        background: #121220;

        overflow:hidden;

        z-index:9999;

    }

    /*加载圈*/

    .spinner {

        margin:0 auto;

        width:60px;

        height:60px;

        position:relative;

        top:40%;

    }

    .container1 > p,.container2 > p,.container3 > p {

        width:15px;

        height:15px;

        background-color:#fff;

        border-radius:100%;

        position:absolute;

        -webkit-animation:bouncedelay 1.2s infinite ease-in-out;

        animation:bouncedelay 1.2s infinite ease-in-out;

        -webkit-animation-fill-mode:both;

        animation-fill-mode:both;

    }

    .spinner .spinner-container {

        position:absolute;

        width:100%;

        height:100%;

    }

    .container2 {

        -webkit-transform:rotateZ(45deg);

        transform:rotateZ(45deg);

    }

    .container3 {

        -webkit-transform:rotateZ(90deg);

        transform:rotateZ(90deg);

    }

    .circle1 {

        top:0;

        left:0;

    }

    .circle2 {

        top:0;

        right:0;

    }

    .circle3 {

        right:0;

        bottom:0;

    }

    .circle4 {

        left:0;

        bottom:0;

    }

    .container2 .circle1 {

        -webkit-animation-delay:-1.1s;

        animation-delay:-1.1s;

    }

    .container3 .circle1 {

        -webkit-animation-delay:-1.0s;

        animation-delay:-1.0s;

    }

    .container1 .circle2 {

        -webkit-animation-delay:-0.9s;

        animation-delay:-0.9s;

    }

    .container2 .circle2 {

        -webkit-animation-delay:-0.8s;

        animation-delay:-0.8s;

    }

    .container3 .circle2 {

        -webkit-animation-delay:-0.7s;

        animation-delay:-0.7s;

    }

    .container1 .circle3 {

        -webkit-animation-delay:-0.6s;

        animation-delay:-0.6s;

    }

    .container2 .circle3 {

        -webkit-animation-delay:-0.5s;

        animation-delay:-0.5s;

    }

    .container3 .circle3 {

        -webkit-animation-delay:-0.4s;

        animation-delay:-0.4s;

    }

    .container1 .circle4 {

        -webkit-animation-delay:-0.3s;

        animation-delay:-0.3s;

    }

    .container2 .circle4 {

        -webkit-animation-delay:-0.2s;

        animation-delay:-0.2s;

    }

    .container3 .circle4 {

        -webkit-animation-delay:-0.1s;

        animation-delay:-0.1s;

    }

    @-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>

    <p id="loading" >

        <p class="spinner">

          <p class="spinner-container container1">

            <p class="circle1"></p>

            <p class="circle2"></p>

            <p class="circle3"></p>

            <p class="circle4"></p>

          </p>

          <p class="spinner-container container2">

            <p class="circle1"></p>

            <p class="circle2"></p>

            <p class="circle3"></p>

            <p class="circle4"></p>

          </p>

          <p class="spinner-container container3">

            <p class="circle1"></p>

            <p class="circle2"></p>

            <p class="circle3"></p>

            <p class="circle4"></p>

          </p>

        </p>

    </p>

</body>


TAG: css 动画

如果你觉得本文还不错,记得分享哦^-^^-^

相关内容:


广告赞助

你可能喜欢




渝ICP备15000999-1号

共享汽车使用网    star个人博客    小十博客    草根赚钱创业    启明博客    王杭个人博客    逐梦博客    李洁博客    Amals技术博客    破晓博客    雨巷博客    起点终点    lisa小站    网讯it资讯    单职业传奇