文字显现
Text Reveal
别名:文字一段一段出现文字逐行出现标题文字渐显一行一行浮现打字机出现
这是什么
把标题或段落按行、按词逐个显现，而不是整块淡入。文字"被说出来"的节奏感让信息有先后与分量， 常用于落地页首屏大标题、章节开场与滚动叙事， 通常进入视口时触发一次。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 落地页首屏大标题、品牌口号需要登场感
- 滚动到视口时逐段显现，引导阅读顺序
- 编辑排版类页面，文字本身是主角
✕ 不适用场景
- 正文段落逐词动画（阅读被拖慢，用户会烦）
- 需要快速扫读的界面（后台、表格、文档）
- 一屏多组文字同时做入场动画（互相打架）
常见形式
行遮罩上滑
Line mask
文字从遮挡条下方向上滑出，电影字幕感
按词浮现
Word stagger
单词逐个上浮淡入，节奏更快
打字机
Typewriter
逐字出现加闪烁光标，终端与对话感
实现要点
overflow: hidden@keyframes translateY 100% → 0animation-delay staggerclip-path行遮罩法：每行外层 overflow:hidden，内层从 translateY(100%) 过渡到 0，animation-delay 逐行递增 80～120ms， 比打字机更快读完。无动画时文字必须直接可见——初始 opacity:0 只能写在 keyframes 里； 尊重 prefers-reduced-motion 直接显示全文。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为当前项目落地页的首屏标题添加逐行文字显现。 先检查现有入场动画与令牌，保持节奏一致。 要求： - 行遮罩上滑，行间延迟 80～120ms，600ms 内完成 - 只在进入视口后触发一次 - 无 JS 时文字可直接可见（渐进增强） - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
元素滚动进入视口时才播放淡入、上浮或滑入动画，之前保持隐藏或占位。 把"一次性呈现全部内容"变成"随阅读节奏逐段揭示"，让长页面的信息 更有秩序感。通常由 IntersectionObserver 触发，只播一次。
动效相似概念一组元素不一起出现，而是按固定间隔依次淡入或上浮，像点名一样逐个到位。 间隔 40～120ms 即可让列表"有秩序地醒来"， 比整块淡入更有生命感，也比真实逐项加载等待感更低。
动效相似概念数字从 0（或旧值）滚动增长到目标值，让计数过程本身表达"数据在增长"。 常用于数据看板大数字、统计区与里程碑（"10 万用户"）。 数字成为动效的主角，比静态数值更有说服力。
动效相似概念把页面当作杂志版面经营的视觉语言：衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线，图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配， 用版式语言讲故事，而非用装饰堆砌氛围。
风格搭配使用围绕单一转化目标纵向组织信息的营销页面：顶部导航与 Hero 主视觉先讲清楚"这是什么、好在哪"， 中段用功能区、信任区（客户 logo、评价、数据）逐层打消顾虑，末端以强视觉的行动按钮收口。 页面按说服顺序分区，每一屏都在回答用户下一步的疑问。
页面搭配使用