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

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

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

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

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

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

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

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

每幀四個(gè)樣本。

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

這里是每幀12個(gè)樣本。

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

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

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

在CSS中完成

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

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

這是沒(méi)有運(yùn)動(dòng)模糊的基礎(chǔ)動(dòng)畫(huà):

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

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

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

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

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