弹跳文字 · 文字
前端Wiki/CSS 特效合集/弹跳文字

弹跳文字

每个字持续小弹跳,节奏轻快适合活力页面

← 返回 文字 类特效列表
弹跳文字~

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

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

HTML 结构

HTML
<div class="fx">
<div class="bl"><span>弹</span><span>跳</span><span>文</span><span>字</span><span>~</span></div>
</div>
实现要点:逐字 delay 错开 + translateY 弹跳曲线 infinite

其它文字类特效

回到 前端Wiki 首页 · CSS 特效合集