制作 JS 廣告的簡易入門（二）利用 CSS3 技術制作廣告

HTML5 Family: CSS3 Ads Versus Flash Ads

http://www.sencha.com/blog/html5-family-css3-ads-versus-flash-ads

July 20, 2010

作者：Arne Bech

翻譯：Frank / Zhangxin09

我們一直都在談論 HTML5 的各門技術。現在，我們就想把一些有趣的、能夠直達 CSS3 核心威力的特性發掘出來。特别我們的想法是，你是不是可以把那些見過的 Flash 廣告以 HTML5 的技術重演一遍。事實證明，與其說你需要 HTML5，卻不如說真的需要的是電子素材和 CSS3 動畫，CSS3 動畫即為 Chrome 和 Safari 浏覽器現正在做的工作。看看三種流行的 Flash 廣告和我們的 CSS3 做的兩者加以比較就會發現，結果有點不可思議。

餘下篇幅，我們将告訴你如何隻用 CSS3/HTML 去建立一個廣告。我們最近投放了一則 Hertz 廣告，為簡易起見，這裡就拿那幅廣告去作為示範藍本，重點就是重新制作 CSS3 版本的。雖然兩種制作的廣告看起來不會百分百一樣（例如我們不知道使用的字型和顔色）但也是非常接近的了。

點選觀看示範，看看你能不能從這些廣告中，分辨出哪個是 Flash 做的，哪個不是，而用 CSS3 做的。

如果你熟悉基本 WebKit 的動畫屬性，那麼說明你已有一定的底子。比如，你應該能夠了解這一點：

Hertz 廣告包括以下主要元件：

靜态元素 Static Elements

動态文字 Animated Text

汽車對象 Car

按鈕 Button

由于我們不是從頭開始建立廣告，是以我們将從 Flash 廣告中（汽車、辨別、按鈕的三角型）提取的三幅圖像。其他的則使用 HTML 和 CSS 重新建立。

可以通過幾種方法設定廣告的參數。對于目前廣告，我們把所有元素進行絕對的定位（absolute positioning ）。要做到這一點，但是又要保持頁面流的話，我們得設定廣告的最外層容器為一個相對定位（relative positioning）。這使得我們既能夠把使用的廣告元素絕對定位，又可以在頁面上放置靜态的廣告。

另外，我們禁止溢出 overflow，這樣保證某些元素（如汽車的元素）将不會溢出廣告顯示的範圍。

廣告元素其 div 都使用絕對定位來組織層次。我們所有的 div，均配置設定唯一的 ID 來與 CSS 相吻合。在 CSS 中，我們安排所有的元素都在動畫的最後一幀（就像你在廣告結束運作後的樣子）。最後一幀就是任何東西都是不可見的，于是我們可以設定其不透明度為零或把它抛到廣告邊界以外。這也確定了該廣告在不支援 -webkit 動畫的浏覽器（如 Firefox）中出現狀況而不會太糗。

HTML 結構如下：

有幾種方式來組織 CSS 動畫和時間軸。對于這個廣告的制作，我們希望保持它教學上的簡單，也就是說，在頁面開始加載的時候便加載所有的動畫，并讓它們的持續時間設為相同（滑鼠的動畫則不再此列），以便我們寫代碼的時候，能夠很容易地看出動畫之間的不同。

但是也有個問題，便是在多個動畫同時運作的時候，由于同時一起運作的緣故，是以無法很好地調整動畫的高度。

文本不會動，是以我們要做的的便是動畫化文本的不透明度。

這裡是三個動畫（每一段文字之一）的第一。

要簡化動畫，我們需要把汽車通過分層來分裂出兩個獨立層的動畫：即在一個大的 div 的裡面，包含一個彈跳的動畫和一個幻燈片汽車的動畫。

然而， CSS3 沒有針對此問題提供直接的解決方式，以動畫衰減波，但我們可以得到一個滿意的結果，使用預設ease-in/out計時功能和定義在“頂”和“自下而上”的反彈的關鍵幀。

下面的 CSS 的使用關鍵幀來做反彈：

既然這樣，這個尺度的車，從圖像中心開始，是以我們需要添加額外的樣式的汽車在移動變換的起源以及汽車底部放在汽車底部方，而不是頂部的廣告。

插入汽車也非常簡單：

我們插入按鈕的方式一如插入汽車的方式那般。

我們想滑鼠懸停時來點變化，一般做法就是改變它的屬性。以往我們是“生硬”地變化，現在我們希望施以動畫化的效果以緻讓人們感覺不太“生硬”，具體說，就是利用 WebKit 的 transform 屬性來變化顔色就可以了。

進一步講，要向前邁進了一步，我們也想重新移動的“閃耀”的效果，按鈕的背景。這其實也可以使用剛才的CSS。首先，我們建立一個漸變背景的按鈕，然後移動該背景就可以了。

如下所示：

總得來說，該廣告還算非常 alpha 的階段，僅在較新版本的 WebKit 浏覽器中（如 Safari 4、Chrome 5、移動版 Safari）支援；Android 的機子可以運作動畫隻是有點瑕疵而已；若在不支援的浏覽器中也可以實作平穩地降級，如 Firefox 和 IE7+ 的話便會顯示最後一幀的圖檔；若降級到 IE6 的話則主要是 PNG2GIF 的轉換問題。