← 返回提示词
Display

指标计数卡片

滚动进入视口时数字向上计数动画的卡片。

作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a metric card that animates a large number counting up from zero to a target value. Use a dark card background, a massive bold number in white, a small label below, and an optional suffix like "%" or "x". Trigger the animation when the card scrolls into view. Use JavaScript for the counting logic and Tailwind CSS. Keep the typography crisp and the layout minimal.
中文提示词
创建一个指标卡片,滚动进入视口时大号数字从零计数到目标值。使用深色卡片背景、巨大的白色粗体数字、下方小标签,以及可选后缀如 "%" 或 "x"。使用 JavaScript 实现计数逻辑,Tailwind CSS 设置样式。保持字体清晰和布局极简。
指标计数卡片 screenshot 1
## Overview 使用动效让指标显得有生命力的数据卡片。常见于 SaaS 落地页和仪表盘。 ## Features - 向上计数动画 - 滚动触发 - 大号粗体数字 - 小标签 + 后缀 - 深色卡片背景 - 极简布局 ## Usage 适用于统计、KPI、增长指标或社会证明数字。 ## Customization 修改 prompt 以: - 添加持续缓动曲线 - 用逗号/K/M 格式化数字 - 一行中动画多个卡片 - 完成时添加微妙发光