用 CSS Grid 和 WebVTT 重制电视缩放特效

The broadcast squeezeback, rebuilt with CSS Grid and WebVTT

作者从观看足球赛时的电视画面缩放特效（squeezeback）获得灵感，发现这种传统上需要后期渲染的布局变化，其实可以用 CSS Grid 轻松实现。通过将播放器置于 3x3 网格中心并动态调整轨道大小，无需复杂的动画循环即可实现流畅的缩放与侧边栏展开。更妙的是，利用 WebVTT 的元数据轨道来定义时间轴，让非技术人员只需编辑文本文件就能控制整个交互流程。文章还展示了如何结合 Canvas 提取视频色调生成环境光效，并解决了 CSS 动画中 fr 值插值和 @property 注册等棘手问题，最终打造出一个高度动态且可维护的交互式视频体验。