css3 模拟动态加载图标

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">

    <title></title>
    <style>
        html{
            font-size: 75px;
        }
        .dd{
            position: relative;
            display: inline-block;
            width: 70px;
            height: 70px;
            overflow: hidden;
            margin: 100px;
            /*animation: spin 1s infinite steps(8);*/
        }
        .d:before,.d:after,.dd:before,.dd:after{
            content: '';
            position: absolute;
            top: 0px;
            left: 33px;
            width: 4px;
            height: 20px;
            border-radius: 1px;
            box-shadow: 0 50px rgba(21, 126, 230, 0.5);
            /*-webkit-transform-origin: 50% 22px;*/
            transform-origin: 50% 35px;
            background: red;
        }
        .d{
            /*width: 80px;*/
            /*height: 80px;*/
        }
        .d:before{
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }
        .d:after{
            -webkit-transform: rotate(-135deg);
            transform: rotate(-90deg);
        }
        .dd:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        @keyframes spin{
            to{
                -webkit-transform:rotate(1turn);
                transform:rotate(1turn)
            }
        }


        .pl-loading {
            position: relative;
            display: inline-block;
            width: .36rem;
            height: .36rem;
            overflow: hidden;
            /*-webkit-animation: spin 1s infinite steps(8);*/
            /*animation: spin 1s infinite steps(8);*/
        }

        .pl-loading:after, .pl-loading:before, .pl-loading>div:after, .pl-loading>div:before {
            content: '';
            position: absolute;
            top: 0;
            left: .16rem;
            width: .04rem;
            height: .12rem;
            border-radius: .02rem;
            box-shadow: 0 0.24rem rgba(150,153,156,.5);
            /*-webkit-transform-origin: 50% .18rem;*/
            transform-origin: 50% .18rem;
            background: #96999c;
        }
        .pl-loading>div:before {
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
        }

        .pl-loading>div:after {
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }
        .pl-loading:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
    </style>
</head>
<body>
<div class="dd">
    <div class="d"></div>
</div>

<div>
    <div class="pl-loading">
        <!--<div></div>-->
    </div>
</div>

</body>
</html>
css3 模拟动态加载图标

猜你喜欢
