1. 这个标题到底在说什么先拆掉“直出视频”的滤镜看到“Claude Opus 5.5 竟然能直出视频”这个标题我第一反应不是兴奋而是警觉。作为一个长期用大模型写代码、做前端 demo 的人我太清楚这类标题的套路了——它说的“视频”大概率不是你想的那种 MP4 文件而是一段用 HTML、CSS、JavaScript 跑起来的动态画面。换句话说模型没有真的生成视频编码它生成的是能动的网页。这个区别非常关键。如果你以为输入一句话就能拿到一个可以发朋友圈的 mp4那你打开结果会失望但如果你知道它给的是可交互、可调参、可二次开发的网页动画那这东西的价值就完全不一样了。它解决的核心问题是把“描述一个动态效果”到“拿到可运行代码”之间的门槛压到了几乎为零。适合谁看前端新手想快速做视觉 demo 的、做产品原型需要动态展示的、以及像我这样懒得手写几百行 CSS 动画、想先让模型搭骨架再自己改的人。我实测下来的结论是它确实能“直出”一段带时间轴、带循环、带缓动的动态画面但前提是你得把提示词写对把技术栈约束清楚把画面尺寸、帧感、循环逻辑都交代明白。下面我就按我自己的实操流程把这件事从头到尾拆一遍。2. 为什么“直出视频”本质是 HTMLCSSJS 动画2.1 模型生成的是代码不是视频流先把这个认知钉死。当前这类模型输出的是文本文本里最接近“视频”的载体就是网页代码。HTML 负责结构CSS 负责样式和动画JavaScript 负责时间控制和交互。所谓“直出视频”其实是模型一次性吐出这三件套浏览器一渲染你看到的就是动态画面。我试过让它直接输出视频文件格式结果它只能给我一段伪代码或者 base64 占位根本跑不起来。但当我换成“用 HTMLCSSJS 做一个 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。但如果你写成“用 HTMLCSSJS 做一个 1440x810 的循环动画画面中一只鹈鹕骑着自行车从左向右移动车轮持续旋转鹈鹕的腿做蹬踏动作背景有云朵缓慢飘过整体循环周期 4 秒输出一个完整的 HTML 文件”出来的东西就完全不一样了。3.2 关键参数必须写死下面这张表是我在实际操作中总结的必填参数缺一个都可能导致结果跑偏参数项推荐写法不写的后果画布尺寸1440x810自适应布局元素错位动画周期4s / 6s / 8s模型随机给可能过快或过慢循环方式infinite / alternate只播一次就停缓动函数ease-in-out / linear默认 linear动作生硬技术栈HTMLCSSJS可能只给 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 langzh-cn接着是head和meta charsetutf-8。这几行必须齐全否则中文可能乱码浏览器也可能进入怪异模式。我遇到过模型偷懒只给div片段的情况这时候你得手动补全。补全的方法很简单把片段放进标准模板里!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title动画演示/title style /* 模型给的 CSS 放这里 */ /style /head body !-- 模型给的 HTML 放这里 -- script // 模型给的 JS 放这里 /script /body /html4.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 charsetutf-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 charsetutf-8动画不动keyframes 名字不匹配检查 animation 和 keyframes 名称动画只播一次缺 infinite加animation-iteration-count: infinite元素位置错乱缺定位上下文父元素加position: relative动画卡顿用了 left/top改用 transform字体渐变失效缺 background-clip加-webkit-background-clip: text7. 这套方法还能怎么扩展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 名和变量名会清晰很多你后面改的时候一眼就能找到对应的地方。这个习惯帮我省了大量翻代码的时间。