CSS实现的loading

前端 html 1077      收藏
CSS实现的loading

.Four{
            width: 50px;
            height: 50px;
            position: relative;
            margin-top:100px;
            margin-left: 100px;
        }
        .Four span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #0A0A0A;
            position: absolute;
            -webkit-animation: load 0.8s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
                width: 8px;
                height: 8px;
            }
            100%{
                opacity: 0.2;
                width: 1px;
                height: 1px;
            }
        }
        .Four span:nth-child(1){
            left: 0;
            top: 50%;
            width: 8px;
            height: 8px;
            margin-top:-4px;
            -webkit-animation-delay:0.1s;
        }
        .Four span:nth-child(2){
            left: 7px;
            top: 7px;
            width: 7px;
            height: 7px;
            -webkit-animation-delay:0.2s;
        }
        .Four span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -4px;
            width: 6px;
            height: 6px;
            -webkit-animation-delay:0.3s;
        }
        .Four span:nth-child(4){
            top: 7px;
            right:7px;
            width: 5px;
            height: 5px;
            -webkit-animation-delay:0.4s;
        }
        .Four span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-4px;
            width: 4px;
            height: 4px;
            -webkit-animation-delay:0.5s;
        }
        .Four span:nth-child(6){
            right: 7px;
            bottom:7px;
            width: 3px;
            height: 3px;
            -webkit-animation-delay:0.6s;
        }
        .Four span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -4px;
            width: 2px;
            height: 2px;
            -webkit-animation-delay:0.7s;
        }
        .Four span:nth-child(8){
            bottom: 7px;
            left: 7px;
            width: 1px;
            height: 1px;
            -webkit-animation-delay:0.8s;
        }

自学php博客

预览地址:http://www.h5tpl.com/h5/demo/loading.html