【html+css(css3)实操】loading动画（代码+注释）

最新推荐文章于 2023-12-22 10:06:15 发布

摆烂大王汪汪汪

最新推荐文章于 2023-12-22 10:06:15 发布

阅读量128

点赞数

文章标签： html 前端 css css3

本文链接：https://blog.csdn.net/weixin_51817440/article/details/125955184

版权

声明

代码来源 uid：470243907

根据本人心情有做适当修改

前端小白为帮助理解自己做的注释，有错误欢迎指出

先看高糊的效果（待更新）

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./03.css">
    <title>loading动画</title>
</head>
<body class="flex-center">
    <div class="loading-grid">
        <div class="flex-center">
            <div class="loading two-balls">
                <div class="pink"></div>
                <div class="blue"></div>
            </div>
        </div>
        <div class="flex-center">
            <div class="three-balls">
                <div class="loading three-balls-bounce">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="shadow"></div>
                    <div class="shadow"></div>
                    <div class="shadow"></div>
                </div>
            </div>
        </div>
        <div class="flex-center">
            <div class="loading four-balls"></div>
        </div>
        <div class="flex-center">
            <div class="loading cube-box">
                <div class="outer-box">
                    <div class="large-box">
                        <div class="small-box">   
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

摸鱼画画：

css:

/*初始化 */
* {
    margin: 0;
    box-sizing: border-box;
    /* 设置width和height为borde+padding+content */
}

body {
    height: 100vh;
    /* css3 设置占用高度为百分百 */
}

/* 设置居中 */
.flex-center {
    display: flex;
    /* 浮动布局 */
    justify-content: center;
    /*JUSTIFY是X轴最中间 */
    align-items: center;
    /* ALIGN是Y轴最中间 */
}

/* 网格布局 */
.loading-grid {
    display: grid;
    /* 网格布局 */
    grid-template-columns: repeat(3, 240px);
    /* 三行每行240px */
    grid-template-rows: repeat(3, 240px);
    /* 三列每列240px */
}

/* START */

/* 装两个球的盒子 */
.two-balls {
    position: relative;
    /* 一般子元素为绝对定位时，父元素为相对定位 */
    width: 44px;
}

/* 分别装粉球和蓝球的两个相同盒子 */
.two-balls div {
    position: absolute;
    /* 绝对定位，可用left、top等调整位置 */
    width: 20px;
    height: 20px;
    border-radius: 50%;

}

/* 装粉球的盒子 */
.two-balls .pink {
    background-color: blueviolet;
    left: -2px;
    animation: ball-pink 2s ease-in-out infinite;
}

/* 装蓝球的盒子 */
.two-balls .blue {
    background-color: aqua;
    right: -2px;
    /* 动画：动画名 时长 以慢速开始和结束 无限循环 */
    animation: ball-blue 2s ease-in-out infinite;
}

/* 动画部分 */
@keyframes ball-pink {
    from {
        /* z-index 值较大的元素应叠加在值较小的元素 */
        z-index: 2;
    }

    50% {
        /* 沿x轴位移 */
        transform: translateX(calc(20px + 3 *2px));
    }
}

@keyframes ball-blue {
    from {
        z-index: 1;
    }

    50% {
        transform: translateX(calc(-20px - 3 *2px));
    }
}

/* END */

/* START */

.three-balls-bounce {
    position: relative;
    /* 一般子元素为绝对定位时，父元素为相对定位 */
    width: 200px;
    height: 62px;
}

.three-balls-bounce .circle {
    /* 位置 */
    position: absolute;
    width: 20px;
    height: 20px;
    left: 15%;
    /* 样式设置 */
    border-radius: 50%;
    background-color: cornflowerblue;
    /* 动画设置 */
    animation: circlee 1s alternate ease infinite;

    transform-origin: 50%;



}

.three-balls-bounce .shadow {
    /* 位置 */
    position: absolute;
    width: 20px;
    height: 4px;
    left: 15%;
    top: 60px;
    /* 样式设置 */
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    filter: blur(1px);
    /* 模糊效果 */
    /* 动画设置 */
    animation: shadow 1s alternate ease infinite;
    z-index: -1;
    transform-origin: 50%;
}


/* COPY */
/* nth-child 伪类选择器选中第二个球和对应的影子统一向左移动\统一延迟*/
.three-balls-bounce .circle:nth-child(2),
.three-balls-bounce .shadow:nth-child(4) {
    left: 45%;
    animation-delay: 0.2s;
}

/* 第三个 */
.three-balls-bounce .circle:nth-child(3),
.three-balls-bounce .shadow:nth-child(5) {
    left: auto;
    right: 15%;
    animation-delay: 0.3s;
}

/* 对球 */
@keyframes circlee {
    from {
        top: 60px;
        height: 5px;
        /* 接触地面的形状 */
        border-radius: 50px 50px 25px 25px;
        /* 沿x轴那个啥 */
        transform: scaleX(1.5);
    }

    40% {

        height: 20px;
        /* 球 */
        border-radius: 50%;
        transform: scaleX(1);
    }

    to {
        /* 回弹到的高度 */
        top: 10%;
    }

}

/* 突然想到之前在此类代码下看到一个评论
说阴影应在接触地面时面积达到最大 */
@keyframes shadow {
    from {
        transform: scaleX(1.5);
    }

    40% {
        transform: scaleX(1);
        opacity: 0.7;
        /*透明度设置 */
    }

    to {
        transform: scaleX(0.2);
        opacity: 0.4;
    }
}


/* END */




/* START */

.four-balls {
    position: relative;
    /* 一般子元素为绝对定位时，父元素为相对定位 */
    width: 50px;
    height: 50px;
    animation: four-balls-rotate 1s infinite;
}

.four-balls::before,
.four-balls::after {
    content: '';
    border-radius: 50%;
    display: block;
    width: 20px;
    height: 20px;
}

.four-balls::before {
    animation: ball1 1s infinite;
    background-color: crimson;
    box-shadow: 30px 0 0 #f8b334;
    margin-bottom: 10px;
}



.four-balls::after {
    animation: ball2 1s infinite;
    background-color: #7aaec8;
    box-shadow: 30px 0 0 #97bf0d;
}


@keyframes four-balls-rotate {
    from {
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        transform: rotate(360deg) scale(1.2);
    }

    to {
        transform: rotate(720deg) scale(0.8);
    }

}

@keyframes ball1 {
    from {
        box-shadow: 30px 0 0 #f8b334;
    }

    50% {
        box-shadow: 0 0 0 #f8b334;
        margin-bottom: 0;
        transform: translate(15px, 15px);
    }

    to {
        box-shadow: 30px 0 0 #f8b334;
        margin-bottom: 10px;
    }

}

@keyframes ball2 {
    from {
        box-shadow: 30px 0 0 #97bf0d;
    }

    50% {
        box-shadow: 0 0 0 #97bf0d;
        margin-top: -20px;
        transform: translate(15px, 15px);
    }

    to {
        box-shadow: 30px 0 0 #97bf0d;
        margin-top: 0;
    }

}





/* END */

/* START */
.outer-box {
    width: 3em;
    height: 3em;
    outline: 1px solid transparent;
    animation: cube-box 1s infinite ease-in-out;
}

.large-box {
    width: 3em;
    height: 3em;
    background-color: #ff4a69;
    outline: 1px solid transparent;
}

.small-box {
    width: 3em;
    height: 3em;
    background-color: white;
    z-index: 1;
    outline: 1px solid transparent;
    animation: small-box 1s alternate infinite ease-in-out;
}

@keyframes cube-box {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(90deg);
    }
}

@keyframes small-box {
    from {
        transform: scale(0.2);
    }

    to {
        transform: scale(0.75);
    }

}

/* END */

暂时先摸到这