动态媒介笔记

首页的海报可以用多种”会动”的媒介。

视频背景

<video autoplay muted loop playsinline src="/media/clip.mp4"></video>

比 GIF 清晰得多，文件也小。muted 是关键——浏览器只允许静音视频自动播放。

Ken Burns

静态图加缓慢缩放平移，立刻有电影感。纯 CSS 实现，零素材成本：

animation: kenburns 14s ease-in-out infinite alternate;

CSS 流动渐变

抽象画面用流动渐变就够，不需要任何素材。适合做色彩过渡的间隔帧。