css菊花加载效果

来源：互联网发布：海露滴眼液知乎编辑：程序博客网时间：2024/04/28 16:53
<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <meta name="format-detection" content="telephone=no" />        <title>=</title>        <style type="text/css">            /******************************    loading   ***********************************/            .loading_icon { width: 60px;  height: 60px;margin: 0px 0px; top:45%;left: 50%; position:absolute;z-index:9999;            }            #loading {                position:absolute; width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.37);  z-index: 9997;            }            .ball-spin-fade-loader > div {                background-color: rgb(255, 124, 72);width: 15px;height: 15px;                border-radius: 100%; margin: 2px;-webkit-animation-fill-mode: both; animation-fill-mode: both;position: absolute;            }            @-webkit-keyframes ball-spin-fade-loader {                50% {                    opacity: 0.3;                    -webkit-transform: scale(0.4);                    transform: scale(0.4); }                100% {                    opacity: 1;                    -webkit-transform: scale(1);                    transform: scale(1); } }            @keyframes ball-spin-fade-loader {                50% {                    opacity: 0.3;                    -webkit-transform: scale(0.4);                    transform: scale(0.4); }                100% {                    opacity: 1;                    -webkit-transform: scale(1);                    transform: scale(1); } }            .ball-spin-fade-loader {                margin-left: -15px;                position: relative; }            .ball-spin-fade-loader > div:nth-child(1) {                top: 25px;                left: 0;                -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;                animation: ball-spin-fade-loader 1s 0s infinite linear; }            .ball-spin-fade-loader > div:nth-child(2) {                top: 17.04545px;                left: 17.04545px;                -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;                animation: ball-spin-fade-loader 1s 0.12s infinite linear; }            .ball-spin-fade-loader > div:nth-child(3) {                top: 0;                left: 25px;                -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;                animation: ball-spin-fade-loader 1s 0.24s infinite linear; }            .ball-spin-fade-loader > div:nth-child(4) {                top: -17.04545px;                left: 17.04545px;                -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;                animation: ball-spin-fade-loader 1s 0.36s infinite linear; }            .ball-spin-fade-loader > div:nth-child(5) {                top: -25px;                left: 0;                -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;                animation: ball-spin-fade-loader 1s 0.48s infinite linear; }            .ball-spin-fade-loader > div:nth-child(6) {                top: -17.04545px;                left: -17.04545px;                -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;                animation: ball-spin-fade-loader 1s 0.6s infinite linear; }            .ball-spin-fade-loader > div:nth-child(7) {                top: 0;                left: -25px;                -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;                animation: ball-spin-fade-loader 1s 0.72s infinite linear; }            .ball-spin-fade-loader > div:nth-child(8) {                top: 17.04545px;                left: -17.04545px;                -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;                animation: ball-spin-fade-loader 1s 0.84s infinite linear; }        </style>    </head>    <body>    <div id="loading">        <div class="loading_icon ball-spin-fade-loader">            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>            <div></div>        </div>    </div></body></html>
0 0