数据统计卡片 4 款（数字滚动 + SVG 趋势图 CSS 源码）

效果演示（真实可交互）

下方为 4 张数据统计卡片：访问量、销售额、新增用户、转化率。页面加载时数字从 0 滚动到目标值；点击”今日 / 本周 / 本月”分段按钮，四张卡片联动刷新数值并带颜色闪烁反馈；每张卡片底部有一条彩色 SVG 迷你趋势折线，悬停卡片整体上浮。

完整代码

HTML 结构：每张卡片包含标签、涨跌徽章、数字（由 data-target 指定目标值）与 SVG 折线：

<div class="ds-card">
  <div class="ds-top">
    <span class="ds-label">访问量</span>
    <span class="ds-trend up">▲ 12.4%</span>
  </div>
  <div class="ds-value" data-target="12860" data-decimals="0">0</div>
  <svg class="ds-spark" viewBox="0 0 100 30" preserveAspectRatio="none">
    <polyline points="0,24 12,20 24,22 36,14 48,16 60,10 72,12 84,6 100,8" />
  </svg>
</div>

核心 CSS：SVG 折线用 CSS 变量控制每张卡片的专属颜色，涨跌徽章用透明背景色块区分：

.ds-spark polyline { stroke: var(--ds-grad); stroke-width: 2; fill: none; }
.ds-card:nth-child(2) .ds-spark { --ds-grad: #43e97b; }
.ds-trend.up { color: #43e97b; background: rgba(67, 233, 123, .12); }
.ds-trend.down { color: #ff6b9d; background: rgba(255, 107, 157, .12); }

原生 JS 数字滚动（requestAnimationFrame + easeOutCubic）：

function countTo(el, target, decimals) {
  const t0 = performance.now(), dur = 900;
  const ease = t => 1 - Math.pow(1 - t, 3);
  function step(now) {
    const t = Math.min((now - t0) / dur, 1);
    el.textContent = (target * ease(t)).toFixed(decimals);
    if (t < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}
periodBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    applyPeriod(btn.dataset.p);   // 今日/本周/本月数据切换
  });
});

参数说明

兼容性与性能

• 数字滚动用 requestAnimationFrame 驱动，与屏幕刷新率同步，比 setInterval 更平滑省电
• 数字使用 font-variant-numeric: tabular-nums 等宽数字，滚动过程不产生宽度抖动
• SVG 折线为静态图形，无逐帧更新，渲染开销极低
• 动画期间仅更新文本节点，不触发布局；切换周期时用 animating 标志防止连点导致动画叠加

常见问题

Q: 数值是假的吗？怎么接真实接口？ 是演示数据。接入时用接口返回值替换 MAP 或直接调用 countTo(el, realValue, decimals) 即可，滚动逻辑通用。

Q: 折线图想换成柱状图或面积图？ SVG 部分可替换为 <rect> 柱状或给 polyline 加 stroke 渐变 + 半透明填充形成面积图，卡片骨架无需改动。

Q: 数字滚动太快/太慢怎么调？ 修改 dur 变量（默认 900ms），或换成 easeOutQuart 等更陡峭的缓动曲线。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名，替换指标名称与配色即可用于生产看板。