三行CSS代码搞定镜头平移（Panning Shot）动画

什么是镜头平移，一目了然看下图的镜头效果：在视频场景中，经常需要实现镜头平移的效果，摄影术语上这叫做Panning Shot，动画中实现镜头平移效果的方法很多种，比如在codepen中搜了下，就找到一个利用 background-position来实现的用例Simple CSS Background Panningcodepen上这个实现其实已经较为简洁，但我在某天实现一个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);}