在我們深入研究如何在CSS中創(chuàng)建一個真實(shí)的動態(tài)模糊之前，有必要快速了解一下什么是動態(tài)模糊，這樣我們就可以更好地了解我們要復(fù)制的是什么。

你是否曾經(jīng)拍攝過快速移動的物體，尤其是在光線較暗的情況下，它會變成模糊的條紋?或者是整個相機(jī)抖動，整個鏡頭變成了一連串的條紋?這就是運(yùn)動模糊，這是相機(jī)工作的副產(chǎn)品。

想象一個相機(jī)。它有一個百葉窗，一扇門打開讓光線進(jìn)來，然后關(guān)上阻止光線進(jìn)來。從它打開的時候到關(guān)閉的時候，是一張單獨(dú)的照片，或者一個移動圖像的單獨(dú)一幀。

一個穿紅襯衫的模糊男子騎著一輛藍(lán)色自行車在森林中疾馳。

如果在快門打開的時候，畫面的主體在移動，我們最終拍攝的是一個物體在畫面中移動的照片。在膠片上，這表現(xiàn)為一種穩(wěn)定的涂片，從起點(diǎn)到終點(diǎn)，被攝對象被放置在無數(shù)個地方。移動的物體最終也是半透明的，在它后面可以看到部分背景。

計算機(jī)所做的就是模擬幾個子幀，然后以不透明度的一小部分將它們組合在一起。在運(yùn)動路徑上，將同一物體的大量副本放在略微不同的位置，就會產(chǎn)生相當(dāng)令人信服的運(yùn)動模糊的摹本。

視頻合成應(yīng)用程序傾向于設(shè)置他們的動態(tài)模糊應(yīng)該有多少細(xì)分。如果你把這個值設(shè)置得很低，你可以看到這個技術(shù)是如何工作的，就像這樣，一個動畫的一個簡單的白點(diǎn)，每幀有四個樣本:

四個重疊的白色不透明的圓圈在黑色的背景。

每幀四個樣本。

十二個重疊的白色不透明的圓圈在黑色的背景。

這里是每幀12個樣本。

32個重疊的白色不透明的圓圈在黑色的背景。

當(dāng)我們達(dá)到每幀32個樣本時，它已經(jīng)非常接近真實(shí)了，特別是在每秒多幀的情況下。

制作令人信服的動態(tài)模糊所需的樣本數(shù)量完全與內(nèi)容相關(guān)。一些邊緣鋒利、移動速度超快的小物體需要很多子幀;但是一些模糊的緩慢移動的東西可能只需要幾個。一般來說，使用越多，效果越有說服力。

在CSS中完成

為了在CSS中近似這種效果，我們需要創(chuàng)建大量相同的元素，使它們半透明，并將它們的動畫稍微偏移幾分之一秒。

首先，我們將使用CSS轉(zhuǎn)換來建立我們想要的動畫基礎(chǔ)。我們將用一個簡單的黑點(diǎn)，并分配它在懸停(或點(diǎn)擊，如果你在移動)轉(zhuǎn)換。我們還將動畫的邊界半徑和顏色，以顯示這種方法的靈活性。

這是沒有運(yùn)動模糊的基礎(chǔ)動畫:

現(xiàn)在，讓我們制作20個相同的黑點(diǎn)副本，所有的副本都被放置在相同的絕對位置。每個副本都有10%的不透明度，這可能比數(shù)學(xué)上的正確稍微多了一點(diǎn)，但我發(fā)現(xiàn)我們需要使它們更不透明，以看起來足夠堅固。

下一步就是奇跡發(fā)生的地方。我們?yōu)槊總€點(diǎn)對象的克隆添加一個稍微增加的過渡延遲值。它們都將運(yùn)行完全相同的動畫，但它們每個都會有3毫秒的偏移。

這種方法的美妙之處在于，它創(chuàng)建了一個偽運(yùn)動模糊效果，可用于大量不同的動畫。我們可以在那里添加顏色變化，縮放過渡，奇怪的時間，和運(yùn)動模糊效果仍然有效。

使用20個克隆對象將工作在大量的快速和緩慢的動畫，但很少仍然可以產(chǎn)生合理的運(yùn)動模糊的感覺。您可能需要調(diào)整克隆對象的數(shù)量，它們的不透明度，以及轉(zhuǎn)換延遲的數(shù)量，以配合您的特定動畫。我們剛才看到的演示有略微超頻的模糊效果，使它更加突出。

最終，隨著計算機(jī)能力的提高，我期望一些主要的瀏覽器可能會開始提供這種效果。這樣我們就可以擺脫擁有20件相同物品的荒謬。同時，這也是一種接近真實(shí)運(yùn)動模糊的合理方法。