文字逐字浮现
逐字浮现：整段文字从下而上淡入，像“浮出水面”。纯 CSS 需要每个字符包一层 span 并给不同 animation-delay；正式项目用 JS 自动拆字更省事。
这里的演示直接写出多个 span，错开 delay 0.05s、0.1s…形成“一个接一个冒出来”的节奏。加 transform: translateY(10px)→0 更有方向感。
- 每个字一个 span，@keyframes fadeInUp 控制位移+透明度
- delay 递增形成波浪节奏
- 配合 cubic-bezier 过冲缓动更灵动
HTML
<style> .wave { text-align: center; font-size: 36px; font-weight: 700; margin: 50px 0; } .wave span { display: inline-block; opacity: 0; transform: translateY(14px); animation: fadeInUp .6s cubic-bezier(.34,1.56,.64,1) forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } </style> <div class="wave"> <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><span style="animation-delay:.7s">特</span><span style="animation-delay:.8s">效</span> </div>
本节要点逐字动画：每字独立 span + 递增 delay；fadeInUp（位移+淡入）最百搭。
