loading效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 20px;
                height: 20px;
                position: absolute;
                top: 100px;
                left: 100px;
            }
            .box span{
                position: absolute;
                width: 6px;
                height:10px;
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(60%,rgba(0,0,0,0.1)),color-stop(100%,rgba(0,0,0,0.01)));
                animation: move 0.8s infinite linear;
            }
            .box span:nth-of-type(1){
                left:0%;
                top: 0;
                margin-left: -3px;
                margin-top: -5px;
                transform: rotate(-45deg);
                animation-delay:-0.7s ;
            }
            .box span:nth-of-type(2){
                left:50%;
                top: 0px;
                margin-left: -3px;
                margin-top: -10px;
                animation-delay:-0.6s ;
            }
            .box span:nth-of-type(3){
                left:100%;
                top: 0px;
                margin-left: -3px;
                margin-top: -5px;
                transform: rotate(45deg);
                animation-delay:-0.5s ;
            }
            .box span:nth-of-type(4){
                left:0%;
                top: 50%;
                margin-left: -9px;
                margin-top: -5px;
                transform: rotate(-90deg);
                animation-delay:-0.0s ;                                    
            }
            .box span:nth-of-type(5){
                left:100%;
                top: 50%;
                margin-left: 3px;
                margin-top: -5px;
                transform: rotate(90deg);
                animation-delay:-0.4s ;            
            }
            .box span:nth-of-type(6){
                left:0%;
                top: 100%;
                margin-left: -3px;
                margin-top: -5px;
                transform: rotate(-135deg);
                animation-delay:-0.1s ;                                        
                
            }
            .box span:nth-of-type(7){
                left:50%;
                top: 100%;
                margin-left: -5px;
                margin-top: 0px;
                transform: rotate(180deg);
                animation-delay:-0.2s ;                                            
            }
            .box span:nth-of-type(8){
                left:100%;
                top: 100%;
                margin-left: -3px;
                margin-top: -5px;
                transform: rotate(135deg);
                animation-delay:-0.3s ;                    
            }
            @-webkit-keyframes move{
                0%{
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(60%,rgba(0,0,0,0.1)),color-stop(100%,rgba(0,0,0,0.01)));

                }
                87.5%{

                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(60%,rgba(0,0,0,0.1)),color-stop(100%,rgba(0,0,0,0.01)));
                }
                100%{
                    background: #fff;
                }
            }
        </style>
    </head>
    <body>
            <div class="box">
                <span class="left-top"></span>
                <span class="middle-top"></span>
                <span class="right-top"></span>
                <span class="left-middle"></span>
                <span class="right-middle"></span>
                <span class="left-bottom"></span>
                <span class="middle-bottom"></span>
                <span class="right-bottom"></span>
            </div>
        <script>
        
        </script>
    </body>
</html>

配色略丑

相关阅读:
009——数组(九) each list array_map array_walk array_walk_recursive
008——数组（八）删除添加数组得到数组键名键值
 laravel怎么获取到public路径
 laravel中composer镜像服务的方式
 logback的使用和logback.xml详解
 log4j-over-slf4j工作原理详解
 java
【Log】logback指定配置文件（二）
logback 中文手册
 logback logback.xml常用配置详解（三） <filter>
原文地址：https://www.cnblogs.com/obeing/p/5332938.html