数字滚动
Number Counter
别名:数字滚动增长数字从小到大计数动画数字跳到目标值数据滚动
这是什么
数字从 0（或旧值）滚动增长到目标值，让计数过程本身表达"数据在增长"。 常用于数据看板大数字、统计区与里程碑（"10 万用户"）。 数字成为动效的主角，比静态数值更有说服力。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 首屏或统计区的大数字（KPI、用户数、下载量）
- 数字进入视口时触发一次，强调里程碑
- 数值更新时从旧值过渡到新值，保持连续感
✕ 不适用场景
- 高频刷新的实时数值（一直在滚，读不了）
- 需要精确抄录的数字（金额、账号、验证码）
- 表格内的密集小数字（噪音大于价值）
常见形式
缓动计数
Eased count
起步快后段减速，最自然的落定
等宽数字
Tabular digits
font-variant-numeric: tabular-nums 防宽度抖动
带格式计数
Formatted count
千分位、单位、小数同步插值
实现要点
requestAnimationFrameease-out interpolationfont-variant-numeric: tabular-nums@property counter (CSS-only)CSS 无法直接给文本计数，实用做法是 requestAnimationFrame 插值 + ease-out 曲线， 时长 1～2s。必须加 font-variant-numeric: tabular-nums 防止数字宽度抖动； 千分位与单位在每帧一起格式化。尊重 prefers-reduced-motion——直接显示终值。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目统计区的大数字添加计数动画。 先检查现有数字展示组件，避免与实时刷新逻辑冲突。 要求： - rAF + ease-out 插值，1～2s，进入视口触发一次 - tabular-nums 防宽度抖动，千分位格式化 - reduced-motion 或 JS 失效时直接显示终值 - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
把关键数据与操作入口聚在一屏内的后台首页，用区域化网格组织：顶栏与侧栏负责导航， 中部依次铺指标卡、图表区和主表格，让用户打开就能看到系统当前状态并直接下钻。 它是后台产品信息架构的核心页面，密度与分区方式决定了整站的阅读节奏。
页面搭配使用元素滚动进入视口时才播放淡入、上浮或滑入动画，之前保持隐藏或占位。 把"一次性呈现全部内容"变成"随阅读节奏逐段揭示"，让长页面的信息 更有秩序感。通常由 IntersectionObserver 触发，只播一次。
动效相似概念用横条从左到右填充来表示任务完成比例的加载指示，常配百分比或步骤文字。 适用于时长可预测的确定性任务：上传、下载、安装与分步表单。
组件应用于把标题或段落按行、按词逐个显现，而不是整块淡入。文字"被说出来"的节奏感让信息有先后与分量， 常用于落地页首屏大标题、章节开场与滚动叙事， 通常进入视口时触发一次。
动效相似概念