SOURCE

console 命令行工具 X clear

                    
>
console
<div class="wavy">
    <span style="--l:1"></span>
    <span style="--l:2"></span>
    <span style="--l:3"></span>
    <span style="--l:4"></span>
    <span style="--l:5"></span>
    <span style="--l:6">.</span>
    <span style="--l:7">.</span>
    <span style="--l:8">.</span>
</div>
html{
    margin:0;
    padding:0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100vw;
    height:100vh;
    background:#242424;
    color: #fff;
}

.wavy{
    position: relative;
    -webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,.2));
}

.wavy span{
  
    display: inline-block;
    font-size: 2rem;
    animation: animate 2s ease-in-out infinite;
    animation-delay: calc(.1s*var(--l));
    
}

@keyframes animate{
    0%{
        transform:translateY(0px);
    }
    20%{
        transform:translateY(-24px);
    }
    40%,100%{
        transform:translateY(0px);
    }
    
}