CSS3-制作加载指示条

来源：互联网发布：dota2第一滴血数据bug 编辑：程序博客网时间：2024/06/07 06:33
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>加载指示器</title>    <style type="text/css">    div {        width: 100px;        height: 100px;        position: absolute;    }    .wrap {        position: relative;        top: 300px;        left: 50%;    }     .wrap div:after {        content: "";        display: block;        width: 10px;        height: 10px;        /*background: linear-gradient(180deg, red, yellow, blue, green,black, pink, white, skyblue);*/        /*background: radial-gradient( red, white, yellow 30%, white, pink, white, skyblue, white, blue, white, white);*/        background-color: gray;        border-radius: 50%;        -webkit-box-reflect:below 10px -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0));    }    /*.wrap div:before{        content: "";        display: block;        width: 10px;        height: 10px;        background-color: green;        border-radius: 50%;        position: relative;    }*/    .wrap div:nth-child(1) {        animation: rotate 2.5s ;    }    .wrap div:nth-child(2) {        animation: rotate 2.5s .3s;    }    .wrap div:nth-child(3) {        animation: rotate 2.5s .6s;    }    .wrap div:nth-child(4) {        animation: rotate 2.5s .9s;    }    .wrap div:nth-child(5) {        animation: rotate 2.5s 1.2s;    }       .wrap div:nth-child(6) {        animation: rotate 2.5s 1.5s;    }    .wrap div {        animation-iteration-count: infinite;    }    @keyframes rotate {    /*  0% {            -webkit-transform: rotateZ(0deg);            -ms-transform: rotateZ(0deg);            -o-transform: rotateZ(0deg);            transform: rotateZ(0deg);            animation-timing-function: linnear;        }*/        20% {            -webkit-transform: rotateZ(72deg);            -ms-transform: rotateZ(72deg);            -o-transform: rotateZ(72deg);            transform: rotateZ(72deg);            animation-timing-function: linear;        }        40% {            -webkit-transform: rotateZ(144deg);            -ms-transform: rotateZ(144deg);            -o-transform: rotateZ(144deg);            transform: rotateZ(144deg);            animation-timing-function: linear;        }        60% {            -webkit-transform: rotateZ(216deg);            -ms-transform: rotateZ(216deg);            -o-transform: rotateZ(216deg);            transform: rotateZ(216deg);            opacity: 0.6;            animation-timing-function: ease-out;        }        80% {            -webkit-transform: rotateZ(288deg);            -ms-transform: rotateZ(288deg);            -o-transform: rotateZ(288deg);            transform: rotateZ(288deg);            opacity: 0.8;            animation-timing-function: ease-out;        }        100% {            -webkit-transform: rotateZ(360deg);            -ms-transform: rotateZ(360deg);            -o-transform: rotateZ(360deg);            transform: rotateZ(360deg);            opacity: 0;            animation-timing-function: ease-out;        }    }    </style></head><body>    <div class="wrap">        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>    </div></body></html>
0 0