数据指标

滚动到视口时数字滚动

Count-up metrics on view

数字首次出现时滚动到位

实时预览

提示词正文

Build count-up metric cards with Tailwind CSS: the same stat-card layout, but each figure animates from zero to its value the first time the card scrolls into view, easing out over about a second with a requestAnimationFrame loop. Format the number with separators and a suffix (2.4M, 98%), and respect prefers-reduced-motion by jumping straight to the final value. Never re-animate on subsequent views.

提示词保持英文原文——直接粘贴进 Claude、Cursor、v0 或任何 AI 编程工具即可使用。

怎么用

数字滚动只播一次;reduced-motion 直接显示终值,别忘。

同类提示词 · 数据指标

© 2026 Genisource Vibe · 提示词详情