1. 这个标题到底在说什么：先拆掉“直出视频”的滤镜
看到“Claude Opus 5.5 竟然能直出视频”这个标题，我第一反应不是兴奋，而是警觉。作为一个长期用大模型写代码、做前端 demo 的人，我太清楚这类标题的套路了——它说的“视频”，大概率不是你想的那种 MP4 文件，而是一段用 HTML、CSS、JavaScript 跑起来的动态画面。换句话说，模型没有真的生成视频编码，它生成的是能动的网页。
这个区别非常关键。如果你以为输入一句话就能拿到一个可以发朋友圈的 mp4，那你打开结果会失望；但如果你知道它给的是可交互、可调参、可二次开发的网页动画，那这东西的价值就完全不一样了。它解决的核心问题是：把“描述一个动态效果”到“拿到可运行代码”之间的门槛，压到了几乎为零。适合谁看？前端新手想快速做视觉 demo 的、做产品原型需要动态展示的、以及像我这样懒得手写几百行 CSS 动画、想先让模型搭骨架再自己改的人。
我实测下来的结论是：它确实能“直出”一段带时间轴、带循环、带缓动的动态画面，但前提是你得把提示词写对，把技术栈约束清楚，把画面尺寸、帧感、循环逻辑都交代明白。下面我就按我自己的实操流程，把这件事从头到尾拆一遍。
2. 为什么“直出视频”本质是 HTML+CSS+JS 动画
2.1 模型生成的是代码，不是视频流
先把这个认知钉死。当前这类模型输出的是文本，文本里最接近“视频”的载体就是网页代码。HTML 负责结构，CSS 负责样式和动画，JavaScript 负责时间控制和交互。所谓“直出视频”，其实是模型一次性吐出这三件套，浏览器一渲染，你看到的就是动态画面。
我试过让它直接输出视频文件格式，结果它只能给我一段伪代码或者 base64 占位，根本跑不起来。但当我换成“用 HTML+CSS+JS 做一个 1440x810 的循环动画”时，它给的东西立刻就能用。这个转变说明：你要顺着模型的能力边界去提需求，而不是顺着自己的想象去提需求。
2.2 为什么是 1440x810 这个尺寸
热词里反复出现“宽1440px，高810px”，这不是随便写的。1440x810 是 16:9 比例，正好是 1440 除以 810 约等于 1.777，和主流显示比例一致。这个尺寸的好处是：在普通笔记本屏幕上能完整显示，不会出现滚动条；同时它比 1920x1080 小一圈，渲染压力低，动画更流畅。
如果你要做的是竖屏内容，那就改成 810x1440；要做方形，就 1080x1080。关键是在提示词里把尺寸写死，否则模型会给你一个自适应布局，动画元素的位置全靠百分比，最后在不同屏幕上跑出来效果完全不一样。我踩过这个坑，第一次没写尺寸，结果那个“鹈鹕骑自行车”的动画在宽屏上鹈鹕被拉成了扁的。
2.3 CSS 动画和 JS 动画该怎么选
模型默认倾向于用 CSS 做动画，因为 CSS 动画代码短、性能好、不需要额外逻辑。但有些效果 CSS 做不了，比如需要根据时间动态改变多个元素的相对位置、需要物理模拟、需要随机性，这时候就得靠 JS。
我的经验是：简单的位移、旋转、缩放、透明度变化，全部交给 CSS；涉及状态切换、时间轴同步、用户交互的，交给 JS。提示词里最好明确说“优先使用 CSS 动画，必要时用 JS 补充”，这样模型不会一上来就给你堆一大坨 JS，导致代码难读难改。
3. 提示词怎么写才能让它真的“动起来”
3.1 提示词的基本结构
我总结了一个还算好用的模板，分四段：画面描述、技术约束、动画逻辑、输出格式。画面描述说清楚要什么；技术约束说清楚用什么写、多大尺寸、什么比例；动画逻辑说清楚怎么动、循环多久、有没有交互；输出格式说清楚要一个完整 HTML 文件还是分开的文件。
举个例子，热词里那个“鹈鹕骑自行车”的提示词，如果只写“画一只鹈鹕骑自行车”，模型大概率给你一张静态图或者一段很粗糙的 SVG。但如果你写成“用 HTML+CSS+JS 做一个 1440x810 的循环动画，画面中一只鹈鹕骑着自行车从左向右移动，车轮持续旋转，鹈鹕的腿做蹬踏动作，背景有云朵缓慢飘过，整体循环周期 4 秒，输出一个完整的 HTML 文件”，出来的东西就完全不一样了。
3.2 关键参数必须写死
下面这张表是我在实际操作中总结的必填参数，缺一个都可能导致结果跑偏：
| 参数项 | 推荐写法 | 不写的后果 |
|---|---|---|
| 画布尺寸 | 1440x810 | 自适应布局，元素错位 |
| 动画周期 | 4s / 6s / 8s | 模型随机给，可能过快或过慢 |
| 循环方式 | infinite / alternate | 只播一次就停 |
| 缓动函数 | ease-in-out / linear | 默认 linear，动作生硬 |
| 技术栈 | HTML+CSS+JS | 可能只给 SVG 或 Canvas |
| 输出格式 | 单个完整 HTML 文件 | 代码分散，复制麻烦 |
提示：尺寸和周期这两个参数，我建议每次都写。模型对这两个数字特别敏感，写了就按你写的来，不写就自己发挥。
3.3 用“分镜”思路描述动画
如果你要的动画比较复杂，比如有多个阶段，那就用分镜的方式写。比如“第 0 到 2 秒，鹈鹕从左侧进入画面；第 2 到 4 秒，鹈鹕停在中间蹬车；第 4 到 6 秒，鹈鹕从右侧离开”。这样模型会按时间轴来组织 CSS 的 keyframes 或者 JS 的 timeline。
我试过用这种方式做一个“植物大战僵尸”的简化动画，把每个僵尸的出场时间、移动速度、攻击动作都按秒写清楚，出来的代码结构非常清晰，每个僵尸一个 class，动画用 CSS 的 animation-delay 控制出场顺序。这比笼统地说“做一个植物大战僵尸动画”效果好太多。
4. 从提示词到可运行代码的完整实操
4.1 第一步：先要骨架，再要细节
我的习惯是分两步走。第一步让模型输出一个最简可运行版本，只包含基本结构和一两个动画元素。比如先要一个 1440x810 的画布，里面有一个方块在移动。这一步的目的是验证代码能跑、尺寸对、循环正常。
第二步再在这个基础上加细节，比如把方块换成鹈鹕、加背景、加多个元素。这样做的好处是：如果第一步就有问题，改起来成本低；如果直接要复杂版本，一旦跑不起来，你根本不知道是哪里错了。
4.2 第二步：检查 HTML 结构是否完整
模型给的代码，第一行通常是<!doctype html>，然后是<html lang="zh-cn">，接着是<head>和<meta charset="utf-8">。这几行必须齐全，否则中文可能乱码，浏览器也可能进入怪异模式。
我遇到过模型偷懒只给<div>片段的情况，这时候你得手动补全。补全的方法很简单，把片段放进标准模板里：
<!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画演示</title> <style> /* 模型给的 CSS 放这里 */ </style> </head> <body> <!-- 模型给的 HTML 放这里 --> <script> // 模型给的 JS 放这里 </script> </body> </html>4.3 第三步：CSS 动画的关键帧怎么写
CSS 动画的核心是@keyframes。模型一般会这样写：
@keyframes moveRight { from { transform: translateX(0); } to { transform: translateX(1200px); } }然后给元素加上animation: moveRight 4s linear infinite;。这里有几个细节要注意：translateX的数值要配合画布宽度，1440 宽的画布，元素从左边移到右边，位移量大概是 1440 减去元素自身宽度。如果元素宽 200，那位移就是 1240 左右。
缓动函数我建议用ease-in-out，这样起步和停止都有缓冲，看起来更自然。linear适合匀速运动，比如车轮旋转。循环方式用infinite让它一直播，用alternate让它来回播。
4.4 第四步：JS 补充交互和时间控制
如果动画需要根据时间改变多个元素，或者需要暂停、重播，那就得用 JS。模型给的 JS 通常是requestAnimationFrame或者setInterval。我个人更推荐requestAnimationFrame，因为它和浏览器刷新率同步，动画更流畅。
一个典型的 JS 时间控制长这样：
let start = null; function step(timestamp) { if (!start) start = timestamp; const progress = (timestamp - start) % 4000 / 4000; // 根据 progress 更新元素状态 requestAnimationFrame(step); } requestAnimationFrame(step);这段代码的意思是：每帧计算当前进度，进度在 0 到 1 之间循环，然后你根据这个进度去设置元素的位置、透明度等。这样比纯 CSS 灵活，但代码量也更大。
5. 那些热词背后藏着的真实需求
5.1 “鹈鹕骑自行车”为什么反复出现
这个提示词在热词里出现了好几次，我猜它已经成了一个测试模型空间理解能力的经典案例。鹈鹕这个形象有特点：大嘴、长脖子、大翅膀，骑自行车的动作涉及身体姿态、腿部蹬踏、车轮旋转、整体位移，是一个综合性的动画测试。
我实际试过这个提示词，模型给的结果是：鹈鹕的身体用 CSS 的 border-radius 拼出来，嘴巴用三角形，自行车用两个圆加几条线，车轮用@keyframes旋转，鹈鹕整体用translateX移动。效果不算精致，但确实能动，而且结构清晰，改起来方便。这说明模型对“用基础图形拼复杂形象”这件事是有能力的。
5.2 “CSS 涟漪光圈扩散”怎么做
这是另一个高频需求。涟漪效果的核心是多个同心圆，每个圆从中心向外扩散，同时透明度从 1 降到 0，尺寸从小到大。用 CSS 实现的话，就是给多个 div 设置相同的动画，但用animation-delay错开时间。
.ripple { position: absolute; border: 2px solid #4a90d9; border-radius: 50%; animation: ripple 2s ease-out infinite; } .ripple:nth-child(2) { animation-delay: 0.5s; } .ripple:nth-child(3) { animation-delay: 1s; } @keyframes ripple { from { width: 0; height: 0; opacity: 1; } to { width: 200px; height: 200px; opacity: 0; } }这个模式可以套用到很多效果上：数字加载动画、脉冲光圈、水波纹，原理都是一样的，只是形状和颜色不同。
5.3 “HTML 一键返回顶部”的算法
热词里还有“html一键返回顶部算法”，这个需求很实际。最简单的实现是给一个按钮绑定点击事件，然后window.scrollTo({ top: 0, behavior: 'smooth' })。但如果你想要更细腻的效果，比如根据滚动速度决定回顶速度，那就得自己写缓动。
function scrollToTop() { const start = window.scrollY; const duration = 500; const startTime = performance.now(); function step(now) { const elapsed = now - startTime; const progress = Math.min(elapsed / duration, 1); const eased = 1 - Math.pow(1 - progress, 3); window.scrollTo(0, start * (1 - eased)); if (progress < 1) requestAnimationFrame(step); } requestAnimationFrame(step); }这段代码用的是三次缓出，起步快、结尾慢，比浏览器自带的 smooth 更有控制感。
6. 实操中一定会遇到的坑和排查方法
6.1 代码跑不起来的第一反应
模型给的代码跑不起来，九成是这三个原因：标签没闭合、CSS 选择器写错、JS 报错。排查顺序是：先看浏览器控制台有没有红色报错，再看 HTML 结构是否完整，最后看 CSS 有没有拼写错误。
我遇到最多的是模型把<style>标签忘了，直接把 CSS 裸写在 body 里，结果样式完全不生效。还有就是@keyframes的名字和animation里引用的名字不一致，这种错误控制台不会报，但动画就是不动，得肉眼比对。
6.2 动画卡顿怎么办
动画卡顿通常是两个原因：一是用了setInterval而不是requestAnimationFrame，二是动画属性触发了重排。CSS 动画里，transform和opacity是性能最好的，因为它们只触发合成，不触发重排。如果你用left、top、width、height做动画，浏览器每帧都要重新计算布局，元素一多就卡。
解决办法很简单：把left/top换成transform: translate()，把width/height换成transform: scale()。我实测下来，同样的动画，用 transform 比用 left/top 流畅不止一个档次。
6.3 中文乱码和字体问题
热词里有“css字体”“css字体渐变”，说明字体是个高频问题。中文乱码基本就是<meta charset="utf-8">没写或者写错。字体渐变则是用background-clip: text配合-webkit-background-clip: text和color: transparent实现的。
.gradient-text { background: linear-gradient(90deg, #ff6b6b, #4a90d9); -webkit-background-clip: text; background-clip: text; color: transparent; }这个效果在 Chrome 和 Edge 上没问题，但在某些旧浏览器上可能不生效，得加降级方案。
6.4 常见问题速查表
| 现象 | 可能原因 | 解决方法 |
|---|---|---|
| 页面全白 | HTML 结构不完整 | 补全 doctype、html、head、body |
| 中文乱码 | 缺 charset 声明 | 加<meta charset="utf-8"> |
| 动画不动 | keyframes 名字不匹配 | 检查 animation 和 @keyframes 名称 |
| 动画只播一次 | 缺 infinite | 加animation-iteration-count: infinite |
| 元素位置错乱 | 缺定位上下文 | 父元素加position: relative |
| 动画卡顿 | 用了 left/top | 改用 transform |
| 字体渐变失效 | 缺 background-clip | 加-webkit-background-clip: text |
7. 这套方法还能怎么扩展
7.1 从单页动画到多场景切换
一旦你掌握了单个动画的写法，就可以用 JS 控制多个场景的切换。比如做一个产品演示，第一屏展示 logo 动画，第二屏展示功能图标依次出现，第三屏展示数据增长。每个场景是一个 div，用display或者opacity控制显示隐藏，配合setTimeout或者requestAnimationFrame做时间轴。
这种思路做出来的东西，已经接近一个轻量级的宣传片了。而且它比真视频的好处是：文件小、可交互、可随时改文案、可适配不同屏幕。
7.2 把动画导出成 GIF 或视频
如果你真的需要 mp4 或者 GIF，那就得借助录屏工具或者专门的库。浏览器端可以用MediaRecorderAPI 把 canvas 内容录下来，但 CSS 动画不在 canvas 里，所以这条路对纯 CSS 动画不适用。更实际的做法是用录屏软件对着浏览器窗口录，然后导出。
我试过用这种方式把一段 8 秒的 CSS 动画录成 GIF，画质损失不大，文件也就几 MB。对于做演示、发文章配图来说完全够用。
7.3 结合本地模型和编辑器
热词里提到“claude code 调用 lmstudio 的本地模型”“vscode 配置 claude code”，这说明很多人想把这类能力接到本地开发环境里。我的建议是：把模型当成一个“代码草稿生成器”，它给你初稿，你在编辑器里改。不要指望它一次给完美代码，但它的初稿能帮你省掉 70% 的重复劳动。
在 VS Code 里，你可以把生成的 HTML 存成.html文件，然后用 Live Server 插件实时预览。改一行保存，浏览器自动刷新，这个反馈循环非常快。我现在的流程就是：模型生成初稿 → 存文件 → Live Server 预览 → 手动调参数 → 满意后复制到项目里。
8. 我个人的几条实操心得
第一，提示词里永远写清楚尺寸和周期。这两个数字是模型最容易忽略、但对结果影响最大的参数。写了就稳，不写就飘。
第二，先要能跑的，再要好看了。不要一上来就要求“精美”“炫酷”“高级感”，这些词模型理解不了。你要说“用蓝色渐变背景”“元素带阴影”“缓动用 ease-in-out”，这些具体的描述才有用。
第三，CSS 动画优先，JS 兜底。CSS 动画代码短、性能好、容易改。只有当 CSS 真的做不了的时候，才上 JS。我见过太多模型一上来就给你写 200 行 JS 做位移，其实 10 行 CSS 就搞定了。
第四，保存每一次能跑的版本。模型每次生成的结果都不一样，有时候第一版反而最好。我习惯把每次能跑的代码存成一个单独的文件，命名带上日期和关键词，这样后面想回退或者对比的时候有据可查。
第五，不要迷信“直出”。所谓直出，只是省掉了从零写代码的过程，但调试、调参、适配这些活一样都少不了。把它当成一个效率工具，而不是一个魔法按钮，心态会好很多，结果也会好很多。
最后再分享一个小技巧：如果你要的动画有多个元素，在提示词里给每个元素起个名字，比如“鹈鹕叫 pelican，自行车叫 bike，云朵叫 cloud”，这样模型生成的代码里 class 名和变量名会清晰很多，你后面改的时候一眼就能找到对应的地方。这个习惯帮我省了大量翻代码的时间。
