loading加载动画

演示地址：https://xibushijie.github.io/loading/loading.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <style type="text/css">

 /* loading */

.loading {

    position: relative;

}

.loading::before {

    width: 4px; height: 4px;

    margin: auto;

    content: '';

    -webkit-animation: spinZoom 1s steps(8) infinite;

    animation: spinZoom 1s steps(8) infinite;

    border-radius: 100%;

    box-shadow: 0 -10px 0 1px currentColor, 10px 0 currentColor, 0 10px currentColor, -10px 0 currentColor, -7px -7px 0 .5px currentColor, 7px -7px 0 1.5px currentColor, 7px 7px currentColor, -7px 7px currentColor;

    /* center */

    position: absolute;

    top: 0; right: 0; bottom: 0; left: 0;

}

/* loading动画 */

@-webkit-keyframes spinZoom {

    0% {

        -webkit-transform: scale(.75) rotate(0);

    }

    100% {

        -webkit-transform: scale(.75) rotate(360deg);

    }

}

@keyframes spinZoom {

    0% {

        transform: scale(.75) rotate(0);

    }

    100% {

        transform: scale(.75) rotate(360deg);

    }

}

    </style>

</head>

<body>

    <a href="" class="btn loading"> </a>

</body>

</html>
巴特西

loading加载动画

最新文章

热门文章
