文字逐字浮现 · 文字
前端Wiki/CSS 特效合集/文字逐字浮现

文字逐字浮现

每个字依次从下淡入,像被风逐字托起

← 返回 文字 类特效列表
逐字浮现的文字

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

CSS 代码

CSS
.fx .wave2{text-align:center;font-size:36px;font-weight:700;margin:50px 0}
.fx .wave2 span{display:inline-block;opacity:0;transform:translateY(14px);animation:kfx-fadeInUp .6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes kfx-fadeInUp{to{opacity:1;transform:translateY(0)}}

HTML 结构

HTML
<div class="fx">
<div class="wave2"><span style="animation-delay:.0s">逐</span><span style="animation-delay:.1s">字</span><span style="animation-delay:.2s">浮</span><span style="animation-delay:.3s">现</span><span style="animation-delay:.4s">的</span><span style="animation-delay:.5s">文</span><span style="animation-delay:.6s">字</span></div>
</div>
实现要点:逐字动画:每字独立 span + 递增 delay;fadeInUp 最百搭

其它文字类特效

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