为什么用视频
美术一次渲染,前端零逻辑。适合需要极高画面品质但不需要交互的场景,文件体积用 H.264 压缩后通常只有几百 KB。
最简单直接的方案:预渲染好的光影视频以 mix-blend-mode: multiply 叠在整页内容之上。无需任何 JavaScript,视频自动循环播放。
亮色区域在 multiply 下趋近透明,暗色区域压暗页面,形成树荫漏光效果。视频本身可以是实拍、AE 合成或程序生成,页面只需一个 <video> 标签。
美术一次渲染,前端零逻辑。适合需要极高画面品质但不需要交互的场景,文件体积用 H.264 压缩后通常只有几百 KB。
视频帧中偏白的区域乘以底色后几乎不变(亮区透光),偏暗的区域将页面颜色压暗(阴影区)。整体效果是自然的明暗交错。