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