如何使用 CSS 过渡制作逼真的运动模糊？

在本文中，我们将使用 CSS 过渡创建逼真的运动模糊效果。 Motion Blur 是一种特殊的效果，我们可以在各种在线视频、电影或动画剪辑中看到它。当一个物体以相当快的速度从一个地方移动到另一个地方时，它会变得模糊，这使得用户推断该物体正在快速移动。

我们将使用 CSS过渡属性创建相同的效果。 CSS Transitions：这个属性允许我们在页面上平滑地移动元素。我们将使用 CSS转换延迟 属性，它可以帮助我们以指定的延迟开始转换。

方法：我们将创建相同的形状 15 次，并为每个元素使用稍微不同的过渡延迟，以便将元素从一个位置移动到另一个位置。这个简单的方法将帮助我们创建该元素的逼真运动模糊。

示例 1：我们将使用矩形形状作为我们的运动模糊效果，当光标移动到容器时，该形状将随着运动模糊效果开始移动。

HTML

输出：

带有 CSS 过渡的运动模糊

示例 2：在此示例中，我们可以清楚地看到有和没有运动模糊的区别，我们将对圆形应用相同的效果。

HTML

  

    

  

  
    
    

        

            


            


            


            


            


            


            


            


            


            


        
        
Without Motion blur
    
  
    
    

        

            


            


            


            


            


            


            


            


            


            


        
  
        
With Motion blur
    

  

输出：

使用 CSS 过渡的运动模糊