如何使用CSS过渡创建逼真的运动模糊效果

你是否曾经拍摄过某些物体快速移动的照片，尤其是在光线不足的情况下，并变成了模糊的条纹？还是整个相机都晃了晃，整个镜头变成了一系列条纹？这是运动模糊，是相机工作原理的副产品。

运动模糊101

想象一下相机。它有一个百叶窗，一扇门打开以允许光线进入，然后关闭以阻止光线进入。从它打开到关闭的时间是一张照片或一幅运动图像。

 

 

如果在按下快门期间框架的对象在移动，我们最终会拍摄到物体移动的照片。在电影上，这表现为稳定的涂片，对象在其起点到终点之间处于无限多个位置。运动对象最终也变成半透明的，在它后面可以看到部分背景。

计算机要伪造的方法是对几个子帧进行建模，然后以不透明度的一小部分将它们组合在一起。将同一对象的大量副本沿运动路径放置在稍有不同的位置，可以创建令人信服的运动模糊传真。

视频合成应用程序倾向于对其运动模糊应具有的细分设置进行设置。如果将此值设置得非常低，则可以确切地看到该技术的工作原理，例如，一个简单的白点动画的帧，每帧四个样本：

 

每帧四个样本。

 

每帧有12个样本。

 

到我们每帧有32个样本时，它已经接近于完全真实了，尤其是以每秒多个帧的速度观看时。

运动模糊所需的样本数量完全与内容有关。边缘锋利的小东西移动得很快，将需要很多子帧。但是一些模糊的动作缓慢移动可能只需要几个。通常，使用更多会产生更令人信服的效果。

用CSS做到这一点