纯HTML/CSS/JS即可实现轻量、兼容性好的H5成绩单，核心是数据驱动、SVG/canvas图表、JSON动态注入、transform/opacity动画及细节适配。
直接用 HTML + CSS + JavaScript 就能做，不需要框架
所谓“H5成绩单”本质是单页 Web 应用，核心是数据可视化 + 交互动画 + 响应式布局。它不是必须用 Vue/React，纯 HTML/CSS/JS 足够完成，且更轻量、易部署、兼容性好。关键在于结构清晰、数据驱动、动画节制。
用 canvas 或 SVG 渲染图表，别硬套 ECharts
很多教程一上来就引入 ECharts，但年度成绩单通常只有 3–5 个指标（如学习时长、答题正确率、课程完成数），用大图表库反而拖慢首屏、增加白屏时间。实际更推荐：
-
SVG：适合柱状图、环形进度、徽章图标——可内联、可 CSS 控制颜色/动画、缩放无锯齿 -
canvas：仅当需要动态粒子效果（比如成绩“飘落”动画）或复杂路径渐变时才用，注意要监听window.devicePixelRatio适配高清屏 - 避免用
img标签塞 PNG 图表——无法响应式、不能换肤、文本不可选
数据从 JSON 注入，别写死在 HTML 里
成绩单内容必然随用户变化，把数据硬编码在
里会导致每次更新都要改 HTML。正确做法是：
- 准备一个
data.json（或直接内联为{...}） - 用
fetch()或JSON.parse()读取，再用document.querySelector()或dataset绑定到对应 DOM - 示例：
el.dataset.key查找 JSON 字段 - 这样后续对接后端 API、做 AB 测试、加埋点都容易扩展
动画用 transform + opacity，禁用 top/left
“H5成绩单”常有数字滚动、卡片上浮、徽章弹出等动效。但用 top 或 left 触发重排（reflow），在低端安卓机上极易卡顿。必须遵守：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习“前端免费学习笔记（深入）”；
- 所有入场/数值动画只用
transform: translateY()、scale()、rotate()和opacity - 数字滚动建议用
requestAnimationFrame+ 文本替换，而非 CSS 动画；避免用counter-increment（不支持小数、难控制节奏） - 给动效容器加
will-change: transform（仅对频繁动画的元素），但别滥用——会提前创建图层，吃内存 - 微信内嵌 WebView 对
@keyframes支持不一致，优先用 JS 控制 class 切换 + CSS 过渡
真正难的不是做出页面，而是让每个数字都有业务含义、每处动效都有触发逻辑、每台手机都渲染准确。比如 iOS Safari 的 vh 在地址栏收起时会跳变，Android 微信的 font-smoothing 默认关掉，这些细节比“怎么加动画”更决定成败。