文字跳动

  <main>
        <div class="dxd_beating">
            <h2>
                <span>王</span>
                <span>美</span>
                <span>好</span>
                <span>最</span>
                <span>漂</span>
                <span>亮</span>
            </h2>
        </div>
    </main>

main {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
main .dxd_beating h2 > span {
  animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
  display: inline-block;
  font-size: 50px;
  color: #666666;
  font-family:"宋体"
}
main .dxd_beating h2 > span:nth-of-type(1) {
  animation-delay: 0s;
}
main .dxd_beating h2 > span:nth-of-type(2) {
  animation-delay: 0.08333333s;
}
main .dxd_beating h2 > span:nth-of-type(3) {
  animation-delay: 0.16666667s;
}
main .dxd_beating h2 > span:nth-of-type(4) {
  animation-delay: 0.25s;
}
main .dxd_beating h2 > span:nth-of-type(5) {
  animation-delay: 0.33333333s;
}
main .dxd_beating h2 > span:nth-of-type(6) {
  animation-delay: 0.41666667s;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
    text-shadow: 0 0 0.05em rgba(0, 0, 0, 0.4);
  }
  100% {
    transform: translateY(-0.5em);
    text-shadow: 0 1em 0.35em rgba(0, 0, 0, 0.4);
  }
}