css实现Ant Design中菊花图loading效果

最新推荐文章于 2021-11-01 23:50:18 发布

qq_37200686

最新推荐文章于 2021-11-01 23:50:18 发布

阅读量1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_37200686/article/details/105120887

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、布局

<body>
    <div>
        <span>
            <i></i><i></i><i></i><i></i>
        </span>
    </div>

</body>
<style>
    span {
        display: inline-block;
        position: relative;
        width: 20px;
        height: 20px;
        margin-top: 10px
    }

    span i {
        position: absolute;
        width: 9px;
        height: 9px;
        transform: scale(0.75);
        border-radius: 100%;
        background: cornflowerblue;
        opacity: 0.3;
        display: block;
    }

    span i:nth-child(1) {
        left: 0;
        top: 0;
    }

    span i:nth-child(2) {
        right: 0;
        top: 0;
    }

    span i:nth-child(3) {
        right: 0;
        bottom: 0;
    }

    span i:nth-child(4) {
        left: 0;
        bottom: 0;
    }

</style>

现在我们看一下布局后的样式

二、动画

我们初始的时候设置的圆圈透明度是0.3，之后我们通过依次改变每一个小圆圈的透明度为1来实现加载的效果，为了让加载的动画更加明显，我们同时加入整个元素旋转的动画，下面是菊花 loading的所有的样式设置

span {
        display: inline-block;
        position: relative;
        width: 20px;
        height: 20px;
        animation: myrotate 1.8s infinite linear;
        margin-top: 10px
}

span i {
        position: absolute;
        width: 9px;
        height: 9px;
        transform: scale(0.75);
        border-radius: 100%;
        background: cornflowerblue;
        opacity: 0.3;
        display: block;
        animation: myopacity 1s infinite linear;
}

span i:nth-child(1) {
        left: 0;
        top: 0;
}

span i:nth-child(2) {
        right: 0;
        top: 0;
        animation-delay: 0.4s;
}

span i:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: 0.8s;
}

span i:nth-child(4) {
        left: 0;
        bottom: 0;
        animation-delay: 1.2s;
}

@keyframes myrotate {
        to {
            transform: rotate(450deg);
        }
}

@keyframes myopacity {
        to {
            opacity: 1;
        } 
}