盡管HTML5技術(shù)差不多已經(jīng)將Adobe的Flash逼上了絕路，但這并不意味著Adobe要始終與HTML5為敵。相反，Adobe現(xiàn)在也是HTML5技術(shù)的主要支持者之一。

Adobe的Web平臺團(tuán)隊正在實施一些新的圖形特性，并在一個網(wǎng)頁中通過講故事的形式展示出來，你可以直接在thegraphicalweb.com中觀看，也可以通過這個視頻來觀看。
 
該項目使用到的技術(shù)主要包括：
 
1.SVG（Scalable Vector Graphics，可縮放矢量圖形）
 
由于SVG的擴(kuò)展性以及易于與CSS/ JavaScript操作特性，該技術(shù)被貫穿使用在thegraphicalweb.com網(wǎng)站中。其中動態(tài)SVG創(chuàng)建和動畫效果，基于一個流行的SVG數(shù)據(jù)可視化庫D3.js。D3在該網(wǎng)站中主要用于在背景中生成群山的形狀。


2.CSS3和SASS
 
在網(wǎng)站中，主要使用CSS Animation和Transforms屬性來實現(xiàn)閃爍和移動效果，這些屬性被應(yīng)用到內(nèi)聯(lián)SVG的路徑和元素上。SASS是構(gòu)建于CSS之上的元語言，擴(kuò)展了CSS3，增加了規(guī)則、變量、混入、選擇器、繼承等特性。該網(wǎng)站主要使用Sass來生成良好格式化的CSS代碼。
 
3.2D Canvas
 
在網(wǎng)站中，使用Processing.js來實現(xiàn)一個粒子系統(tǒng)，通過切換點陣的組合形式，來呈現(xiàn)一個說話的人臉效果。


4.著色器
 
該網(wǎng)站使用了一個自定義的GLSL著色器，來實現(xiàn)WebGL場景中發(fā)光的背景效果。通過CSS Filter Lab這個工具，編寫自定義著色器的難度大大降低。


此外，該網(wǎng)站還使用3D Transforms來實現(xiàn)場景旋轉(zhuǎn)、縮放效果，使用HTML5 Audio來播放音頻。
 
該網(wǎng)站的源碼托管在Github，感興趣的Web開發(fā)者可以下載學(xué)習(xí)。
 
演示網(wǎng)站：thegraphicalweb.com
 
項目源碼：https://github.com/adobe/graphicalweb-keynote