SuperAPI AI 工具集

count-up

设计与创作

查看项目

更新于 10-16 01:36

技能介绍

用途:让数字在滚动进入视口时一次性递增到目标值,常用于统计、指标等区块,用一个醒目数字吸引视线。

主要能力:基于 data 属性标注数字目标值与格式。基础用法为 <span data-count="10000" data-count-suffix="+">0</span>,可选 data-count-prefix="$"、data-count-duration="900"。首次进入视图时完成递增,不重复播放。

使用方式:引入 count-up.css 与 count-up.js 并链接,然后在需要动画的数字元素上添加 data-count 等属性即可。该技能属于 motion-anything,需遵循 MOTION-SPEC.md。

适用场景:统计或指标区块,突出一个亮眼数字。不适合需要读者在中途精确读取数值的场景,也不宜同时在页面触发多个计数器,应只选最重要的那个。

无障碍与性能:在 prefers-reduced-motion 下直接显示最终值;使用等宽数字(tabular figures)保持宽度稳定。具体安装命令、依赖版本与浏览器兼容范围暂未提供。