纯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 里
成绩单内容必然随用户变化，把数据硬编码在 <div class="score">92</div> 里会导致每次更新都要改 HTML。正确做法是：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 准备一个
data.json（或直接内联为<script type="application/json">{...}</script>） - 用
fetch()或JSON.parse()读取，再用document.querySelector()或dataset绑定到对应 DOM - 示例：
<div class="progress-bar" data-key="completion_rate"></div>→ JS 中取el.dataset.key查找 JSON 字段 - 这样后续对接后端 API、做 AB 测试、加埋点都容易扩展
动画用 transform + opacity，禁用 top/left
“H5成绩单”常有数字滚动、卡片上浮、徽章弹出等动效。但用 top 或 left 触发重排（reflow），在低端安卓机上极易卡顿。必须遵守：
立即学习“前端免费学习笔记（深入）”；
- 所有入场/数值动画只用
transform: translateY()、scale()、rotate()和opacity - 数字滚动建议用
requestAnimationFrame+ 文本替换，而非 CSS 动画；避免用counter-increment（不支持小数、难控制节奏） - 给动效容器加
will-change: transform（仅对频繁动画的元素），但别滥用——会提前创建图层，吃内存 - 微信内嵌 WebView 对
@keyframes支持不一致，优先用 JS 控制 class 切换 + CSS 过渡
真正难的不是做出页面，而是让每个数字都有业务含义、每处动效都有触发逻辑、每台手机都渲染准确。比如 iOS Safari 的 vh 在地址栏收起时会跳变，Android 微信的 font-smoothing 默认关掉，这些细节比“怎么加动画”更决定成败。
