console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>加载</title>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
</div>
</body>
</html>

.box1 {
    width: 500px;
    margin: 0 auto;
    height: 500px;
    border-bottom: 1px solid black;
    position: relative;
}

.box2 {
    height: 20px;
    width: 20px;
    border: 1px solid black;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    background-color: darkred;
    /*animation: fallDown 4s infinite*/
    animation: fallDown 1s infinite alternate;
}

@keyframes fallDown {
    from {
        top: 0;
    }
    to {
        top: 450px;
    }
}

.box2:nth-child(2) {
    left: 53px;
    animation-delay: 0.1s;
    background-color: #bbffaa;
}

.box2:nth-child(3) {
    left: 106px;
    animation-delay: 0.2s;
    background-color: aqua;
}

.box2:nth-child(4) {
    left: 159px;
    animation-delay: 0.3s;
    background-color: blueviolet;
}

.box2:nth-child(5) {
    left: 212px;
    animation-delay: 0.4s;
    background-color: yellow;
}

.box2:nth-child(6) {
    left: 268px;
    animation-delay: 0.5s;
    background-color: #ff253a;
}