loading动画

标签：loader   mat   enter   item   load   html   flex   display   ram   

HTML:
<div class="box">
    <div class="load">
        <div class="loader">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</div>

CSS:
<style>

　　.box {
    　　width: 100%;
    　　height: 300px;
　　}

    .load {
        width: 300px;
        height: 300px;
        margin-left: 100px;
        background-color: gray;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .loader{
        position:relative;
    }
    .load i {
        display: block;
        width: 20px;
        height: 3px;
        background-color: white;
        position:absolute;
        -webkit-animation:loads 1s ease -1s infinite;
    }
    .load i:nth-child(1){
        top:-50px;
        left:0;
        transform:rotateZ(90deg);
        -webkit-animation:loads 1s ease -0.9s infinite;
    }
    .load i:nth-child(2){
        top:-35px;
        left:35px;
        transform:rotateZ(150deg);
        -webkit-animation:loads 1s ease -0.8s infinite;
    }
    .load i:nth-child(3){
        top:-10px;
        left:50px;
        transform:rotateZ(0deg);
        -webkit-animation:loads 1s ease -0.7s infinite;
    }
    .load i:nth-child(4){
        top:15px;
        left:50px;
        transform:rotateZ(20deg);
        -webkit-animation:loads 1s ease -0.6s infinite;
    }
    .load i:nth-child(5){
        top:38px;
        left:40px;
        transform:rotateZ(40deg);
        -webkit-animation:loads 1s ease -0.5s infinite;
    }
    .load i:nth-child(6){
        top:50px;
        left:0;
        transform:rotateZ(90deg);
        -webkit-animation:loads 1s ease -0.4s infinite;
    }
    .load i:nth-child(7){
        top:40px;
        left:-35px;
        transform:rotateZ(120deg);
        -webkit-animation:loads 1s ease -0.3s infinite;
    }
    .load i:nth-child(8){
        top:15px;
        left:-50px;
        transform:rotateZ(150deg);
        -webkit-animation:loads 1s ease -0.2s infinite;
    }
    .load i:nth-child(9){
        top:-10px;
        left:-50px;
        -webkit-animation:loads 1s ease -0.1s infinite;
    }
    .load i:nth-child(10){
        top:-35px;
        left:-35px;
        transform:rotateZ(30deg);
        -webkit-animation:loads 1s ease 0s infinite;
    }
    @-webkit-keyframes loads{
        0%{
            opacity:1;
        }
        25%{
            opacity:0.75;
        }
        50%{
            opacity:0.5;
        }
        75%{
            opacity:0.25;
        }
        100%{
            opacity:0;
        }
    }
</style>

loading动画

标签：loader   mat   enter   item   load   html   flex   display   ram   

原文地址：http://www.cnblogs.com/qishaminghao/p/6382157.html