手写转圈圈效果

作者: 肥羊猪 | 来源:发表于2021-04-21 15:18 被阅读0次

手写转圈圈效果
转圈圈
圈圈转啊转
大海小鸡还有虫子
诗歌|| 年轮在转圈圈
艾灸数圈圈，效果更好。
自定义流势布局
jQuery+Bootstrap手写树形菜单
Android手写开源项目和资料搜集
手写RPC框架(4)-重写服务治理，开启1000个线程看看net

// html
<div class="loading-content">
    <div class="loading-dot"></div>
    <div class="loading-dot"></div>
    <div class="loading-dot"></div>
</div>
// css
.loading-content {
    display: flex;
    justify-content: center;
    .loading-dot {
        width: 20px;
        height: 20px;
        background: #8385aa;
        border-radius: 50%;
        margin: 150px  10px;
        animation: bouncing-animate 0.6s infinite alternate;
        &:nth-child(2) {
            animation-delay: 0.2s;
        }
        &:nth-child(3) {
            animation-delay: 0.4s;
        }
    }
}

@keyframes bouncing-animate {
    to {
        opacity: 0.1;
        transform: translate3d(0, -50px, 0);
    }
}

// html
<div class="donut"></div>

// css
.donut {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 4px solid rgba(0,0,0,0.1);
    margin: 30px;
    border-left-color: #7983ff;
    animation: donut-spin 1.2s linear infinite;
}

@keyframes donut-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">

<head>
    <meta charset="UTF-8">
    <title>loading</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 8rem;
            height: 8rem;
            position: absolute;
            z-index: 0;
        }

        .box:nth-of-type(2) {
            transform: rotate(45deg);
        }

        .box div {
            width: 1.5rem;
            height: 1.5rem;
            background: #f2f5c4;
            border: 1px solid #333;
            border-radius: 50%;
            position: absolute;
            animation: run 1.5s infinite linear;
        }

        .box div:nth-of-type(1) {
            /*左上*/
            left: 0;
            top: 0;
        }

        .box div:nth-of-type(2) {
            /*右上*/
            right: 0;
            top: 0;
        }

        .box div:nth-of-type(3) {
            /*左下*/
            left: 0;
            bottom: 0;
        }

        .box div:nth-of-type(4) {
            /*右下*/
            right: 0;
            bottom: 0;
        }

        /*动画效果*/
        @keyframes run {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1);
            }

            100% {
                transform: scale(0);
            }
        }

        /*延迟动画效果   负值是解决蹦动的效果*/
        .box:nth-of-type(1) div:nth-of-type(1) {
            animation-delay: -0.1s;
        }

        .box:nth-of-type(2) div:nth-of-type(1) {
            animation-delay: -0.3s;
        }

        .box:nth-of-type(1) div:nth-of-type(2) {
            animation-delay: -0.5s;
        }

        .box:nth-of-type(2) div:nth-of-type(2) {
            animation-delay: -0.7s;
        }

        .box:nth-of-type(1) div:nth-of-type(3) {
            animation-delay: -0.9s;
        }

        .box:nth-of-type(2) div:nth-of-type(3) {
            animation-delay: -1.1s;
        }

        .box:nth-of-type(1) div:nth-of-type(4) {
            animation-delay: -1.3s;
        }

        .box:nth-of-type(2) div:nth-of-type(4) {
            animation-delay: -1.5s;
        }

        .loadding_box {
            height: 22.5rem;
            width: 22.5rem;
            margin: 0 auto;
            position: relative;
        }

        .bg_img {
            position: absolute;
            z-index: 10;
        }

        .bg_img img {
            height: 100%;
        }

        .loading_d {
            position: absolute;
            left: 9rem;
            top: 2rem;
        }
    </style>
</head>

<body>
    <div class="loadding_box">
        <div class="loading_d">
            <div class="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

        <div class="bg_img">
            <img src="./fnloading.png" alt="" srcset="">
        </div>
    </div>

</body>

</html>