最新

大多数产品演示视频都是通过屏幕录制工具或像 Remotion 这样的工具制作的，这些工具将帧渲染为 MP4。我想要一些不同的东西：只需在任何 HTML 元素上添加一个 CSS 类，就能获得适合产品视频的电影级动画，完全在浏览器中实现。 AliveUI 视频模块是一组用于常见视频用户界面原件的 CSS 工具类：动画指标卡、吐司通知、打字机文本、动感排版、下三分之一、场景背景（极光、星空、散景）、设备框架、3D 效果和粒子特效。 有趣的技术点在于：没有渲染管道。动画作为原生 CSS 关键帧运行。一个小型运行时（约 2KB）通过数据属性处理声明式场景序列，在场景激活时通过 offsetHeight 重排技巧重新启动动画，并在场景之间驱动 CSS 过渡类。 与 Remotion 的权衡是：你无法实现逐帧完美的程序化视频或在没有无头浏览器的情况下导出独立的 MP4。相反，你获得的是即时播放、零构建步骤，以及可以直接嵌入网页的模块。 该模块建立在 AliveUI 之上，这是一个基于 PostCSS 插件的 CSS 框架。视频模块是与之一起发布的一个独立层。 https://aliveui.dev/video-blocks