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);
}
}