什么是镜头平移,一目了然看下图的镜头效果:
在视频场景中,经常需要实现镜头平移的效果,摄影术语上这叫做 Panning Shot,动画中实现镜头平移效果的方法很多种,比如在 codepen 中搜了下,就找到一个利用 background-position 来实现的用例
Simple CSS Background Panning
codepen 上这个实现其实已经较为简洁,但我在某天实现一个 css 动画镜头平移的需求时想到个更简洁的,hiahia????,只需三行关键 CSS 代码就可搞定,废话少说,先看效果:
三行 CSS 关键代码搞定镜头平移(Panning Shot)动画
主要是利用了 transform-origin 的变换搭配使用 transform:scale(),background-size: contain; 这两个 css 属性实现镜,下面看代码:
CSS 关键部分代码
// 背景图片初始样式
.bg {
…
background-size: contain;
transform-origin: right top;
transform: scale(3);
transition: all 2s;
}
// 之后通过 JS 添加一个样式类就可以啦
.panning-shot {
top: 0;
transform-origin: left top;
background-size: contain;
transform: scale(3);
}