很好看的css3 Loading

来源：互联网发布：淘宝网店如何转让编辑：程序博客网时间：2024/04/25 21:25
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>css3 loading</title>    <style type="text/css">    *{        margin: 0px;        padding: 0px;        border:0px;    }    html,body{        min-height: 100%;    }    body{        background: radial-gradient(#eee,#444);    }    .loader{        position: absolute;        top:0;        bottom: 0;        left: 0;        right: 0;        margin:auto;        width:175px;        height: 100px;    }    .loader span{        display: block;        background: #ccc;        width:7px;        height: 10%;        border-radius: 14px;        margin-right: 5px;        float: left;        margin-top: 25%;    }    .loader span:last-child{        margin-right: 0;    }    .loader span:nth-child(1){        animation: load 2.5s 1.4s infinite linear;    }    .loader span:nth-child(2){        animation: load 2.5s 1.2s infinite linear;    }    .loader span:nth-child(3){        animation: load 2.5s 1s infinite linear;    }    .loader span:nth-child(4){        animation: load 2.5s 0.8s infinite linear;    }    .loader span:nth-child(5){        animation: load 2.5s 0.6s infinite linear;    }    .loader span:nth-child(6){        animation: load 2.5s 0.4s infinite linear;    }    .loader span:nth-child(7){        animation: load 2.5s 0.2s infinite linear;    }    .loader span:nth-child(8){        animation: load 2.5s 0s infinite linear;    }    .loader span:nth-child(9){        animation: load 2.5s 0.2s infinite linear;    }    .loader span:nth-child(10){        animation: load 2.5s 0.4s infinite linear;    }    .loader span:nth-child(11){        animation: load 2.5s 0.6s infinite linear;    }    .loader span:nth-child(12){        animation: load 2.5s 0.8s infinite linear;    }    .loader span:nth-child(13){        animation: load 2.5s 1s infinite linear;    }    .loader span:nth-child(14){        animation: load 2.5s 1.2s infinite linear;    }    .loader span:nth-child(15){        animation: load 2.5s 1.4s infinite linear;    }    @keyframes load{        0%{            background: #ccc;            margin-top: 25%;            height: 10%;        }        50%{            background: #444;            height: 100%;            margin-top: 0%;        }        100%{            background: #ccc;            height: 10%;            margin-top: 25%;        }    }    </style></head><body><div class="loader">    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span></div></body></html>
阅读全文
0 0