用 CSS Grid 与 WebVTT 重建广电画中画效果
来源：mux.com — 排名 #21 · 9 分
📋 概述
Mux 工程师 Dave Kiss 展示如何用 CSS Grid 与 WebVTT 文本轨道在网页上重建广电行业的「画中画挤压」（squeezeback）效果。通过把视频放入 3×3 网格中心并动画化轨道尺寸，挤压与面板显现成为同一事件；用 WebVTT cue 作为时间轴，让布局随播放进度切换。
🔑 核心要点
- 用 3×3 CSS Grid 压缩视频、展开周边面板，让挤压与揭示成为同一个动画事件。
- 以 WebVTT cue 的标识符作为布局时间轴，切换布局而无需轮询时间。
- 通过 @property 注册与匹配 fr 总和等技巧解决动画与插值问题。
💡 金句
挤压不过是网格里一次轨道尺寸的动画，浏览器天生擅长布局变化。
👍 0
👎 0
← 返回 Hacker News 首页