/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}
先说明一个前提：下面提到的 Opus 5.5 只是我给这类“号称能生成视频”的模型起的一个代号，没必要对号入座。最近几天，我的朋友圈被一条 demo 刷屏，画面里光线流动、粒子翻涌、转场丝滑，文案写的是“Opus 5.5 生成视频”。很多人看完直接转发，但只要稍微做点技术检查就会发现，下载下来的根本不是 mp4，也不是 webm，而是一个孤零零的 HTML 文件。双击打开，浏览器自动开始播放，画面确实在动——看着像视频，本质是程序。
这件事比“AI 能不能生成视频”本身更值得展开聊。它意味着模型的真实路径是：先输出一段 JavaScript/HTML/CSS 动画代码，再让浏览器解释执行，把动画一帧一帧画到屏幕上。换句话说，它不是“导演了一条片子”，而是把剧本、布景、演员动作、灯光调度全部写成了代码，然后让浏览器现场演出。这篇文章我会把这件事的原理、验证方法、工程化套路以及常见坑位拆开讲一遍。适合前端工程师、AIGC 深度玩家、刚接触 AI 产品的设计师，也包括那些好奇“为什么 AI 视频总是很酷，但下载下来却打不开”的普通网友。
1. 一条“假视频”的真实现场：AI 到底干了什么事
1.1 下载下来的不是 mp4，而是 HTML
我故意提“假视频”，这个“假”要加引号：画面是动态的，内容也是模型生成的，但它不是大众认知里的视频文件。判断标准很简单——真正的视频文件是有序封存的帧像素数据，播放器按照固定时间轴把像素重放出来；而这里说的“AI 视频”是一个程序，每一帧画面都由浏览器实时计算，换一台机器、换一个屏幕宽度，甚至换一次浏览器主题，画面细节都可能发生变化。
你点开一个分享链接，选择下载，得到的可能是 xxx.html，或者一个依赖在线资源的网页。第一次看到这个结果，我第一反应也是“模型是不是出错了”？客户要的是视频，你给我一个网页？但实际操作几轮之后我发现，这个网页就是完整的交付物：打开即播放，无需剪辑，时长、循环、交互逻辑全部写死在代码里。把这个文件用浏览器打开并录屏，再转成 mp4，你基本看不出它与传统视频的差别，只有帧率、清晰度这类参数能暴露端倪。
这也是此类模型与传统视频生成模型的本质差异：后者给你结果文件，前者给你一套“产生结果”的方法。理解这一点之后，你就不会再用“生成一段 4K 60 帧写实视频”这种提示词去要求它，也不会在拿到 HTML 时觉得项目黄了。相反，你会意识到手里是一个可以反复修改的工程源文件。
1.2 为什么模型偏爱“写代码画动画”，而不是直接出片
刚开始我会觉得这是在取巧，深入研究之后才明白，这其实是成本和可控性共同作用下的理性选择。
视频生成模型的核心痛点在于“时间一致性”。要让连续几十帧里的人物、光线、材质保持稳定，需要非常庞大的算力和参数规模，现有产品大多只能做到秒级、低分辨率输出。而代码生成动画时，模型输出的只是 token 序列，推理成本比直接扩散生成视频低得多；更重要的是，代码天然是确定性的——定义好 t 时刻的位置、颜色和时间轴，那么画面就一定按脚本走，不会出现前后两帧断裂、人物穿帮这类问题。
还有一个容易被低估的点是“可修改性”。传统视频生成器做了一段 10 秒片子，你想把粒子颜色改成蓝色，基本只能重新抽卡；而代码动画里的颜色通常只是一个变量或参数，找到那行赋值改掉就行。这在动态 Logo、产品演示、原型设计这类场景里尤其值钱，因为改动频率远高于传统广告片。
当然代价也很明显：代码画不出来超出其表达力的内容。想要写实人物、流体物理、真实镜头感，HTML 动画会非常吃力。但如果需求是“做一个好看的动态视觉”，当前阶段选择代码动画几乎是性价比最高的答案。
2. 浏览器逐帧画画的三种底牌：Canvas、CSS、Shader
2.1 Canvas 2D：逐帧动画的最常用骨架
拆开模型生成的 HTML 文件，十有八九会看到 <canvas> 标签。它定义了一块画布，JavaScript 在每一帧都把这幅画布擦掉、重新绘制，循环往复。
这里的关键 API 是 requestAnimationFrame，简称 RAF。它让浏览器在每次刷新屏幕之前调用你的绘图函数，通常是每秒 60 次。绘图函数里做三件事：清空画布、更新状态、绘制当前画面。一旦这个循环跑起来，画布上的内容就会连续变化，视觉上就是一段视频。
我用一个最小粒子动画骨架来做说明：
<canvas id=\”c\” width=\”800\” height=\”450\”></canvas>
<script>
const canvas = document.getElementById(\’c\’);
const ctx = canvas.getContext(\’2d\’);
const dots = [];
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let d of dots) {
d.x += d.vx;
d.y += d.vy;
ctx.beginPath();
ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(update);
}
requestAnimationFrame(update);
</script>
这段代码看起来朴素，但它解释了这类“视频”的两个普遍特点：一是时长理论上可以无限长，只要循环不被销毁动画就一直跑；二是画面上特别“丝滑”，因为 RAF 自动与屏幕刷新率对齐，比写死 setTimeout(16) 稳定得多。把小圆点换成柔和的圆环，加一些透明度叠加，再配上缓动函数，你就能伪造出“星空流动”“云雾翻涌”的效果。大量爆款 demo 的第一层真相就在这里。
2.2 DOM / CSS 动画：让元素“动”起来，不需要自己画像素
Canvas 适合自己控制每一
