HTML网页文字逐行渐显效果代码-html教程-PHP中文网

纯 css 可实现文字逐行渐显；关键用 line-height + clip-path 或 mask 配合 animation 控制显示区域，通过 inset() 上边距从 100% 降至 0 逐步露出各行，总时长按行数均分，避免拆 span 或 opacity 整段闪现。

html网页文字逐行渐显效果代码

用 CSS animation 实现文字逐行渐显的最小可行方案

直接给结论：纯 CSS 就能做，不需要 JS；关键不是“逐字”而是“逐行”，得靠 line-height + clip-path 或 mask 控制显示范围，animation 驱动高度变化。用 opacity 或 visibility 只能整段闪现，达不到“逐行”效果。

常见错误是把文本拆成多个 <span></span> 手动加 delay——代码冗余、维护困难、换行响应不一致。真正靠谱的做法是让浏览器按渲染后的行盒（line box）自然分层。

必须给容器设固定 line-height 和 overflow: hidden
动画目标是让 clip-path 的 inset() 上边距从 100% 降到 0，逐步露出各行
动画时长要配合行数：比如 5 行文本，总时长设为 2.5s，每行约 0.5s 进入

.fade-lines {
  line-height: 1.6;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  animation: reveal-lines 2.5s forwards;
}
@keyframes reveal-lines {
  to { clip-path: inset(0 0 0 0); }
}

Firefox 下 `clip-path` 不生效？换 `mask` 方案

clip-path 在旧版 Firefox（inset() 时容易失效。这时改用 -webkit-mask + linear-gradient 更稳妥，且兼容 Chrome/Safari/Firefox 100+。

原理一样：用渐变遮罩从全黑（隐藏）过渡到全白（显示），控制遮罩高度展开。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

mask 图像必须用 linear-gradient(to bottom, #000 0%, #000 50%, #fff 50%, #fff 100%) 这种硬切方式，避免模糊过渡
mask-size 的高度要等于单行高度 × 行数，宽度设为 100%
mask-repeat 设为 no-repeat，mask-position 初始为 top，动画中改为 bottom

.fade-lines-mask {
  line-height: 1.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, #fff 50%, #fff 100%);
  -webkit-mask-size: 100% calc(1.6em * 5); /* 假设共5行 */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top;
  animation: mask-reveal 2.5s forwards;
}
@keyframes mask-reveal {
  to { -webkit-mask-position: bottom; }
}

动态内容行数不确定时怎么算动画时长？

服务端或 JS 渲染的文本行数不可预知，硬写 calc(1.6em * N) 会出错。这时候不能靠 CSS 纯解，得加轻量 JS 获取实际行数：

用 getClientRects() 拿到所有行盒，长度就是真实行数：element.getClientRects().length
避免用 offsetHeight / line-height，因为 padding/border/字体渲染差异会导致计算偏差
拿到行数后，动态设置 style.setProperty('--line-count', n)，CSS 里用 calc(1.6em * var(--line-count))
动画总时长建议按 n * 0.4s 动态生成，太快看不清，太慢拖节奏

注意：如果文本在 viewport 外或 display: none，getClientRects() 返回空数组，得等元素可见后再执行。