每个字持续小弹跳,节奏轻快适合活力页面
← 返回 文字 类特效列表上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果
.fx .bl{text-align:center;font-size:38px;font-weight:800;margin:50px 0;color:#fff}
.fx .bl span{display:inline-block;animation:kfx-bounce 1.4s ease-in-out infinite}
.fx .bl span:nth-child(2){animation-delay:.1s}
.fx .bl span:nth-child(3){animation-delay:.2s}
.fx .bl span:nth-child(4){animation-delay:.3s}
.fx .bl span:nth-child(5){animation-delay:.4s}
@keyframes kfx-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px)}60%{transform:translateY(-8px)}}<div class="fx">
<div class="bl"><span>弹</span><span>跳</span><span>文</span><span>字</span><span>~</span></div>
</div>