在搞清楚這個問題之前,我們得先弄清楚H5和css3有哪些驚人的特性

首先我們來看下H5的新特性,canvas標簽,多媒體標簽(audio/video) 離線存儲, 新的表單元素, 新的表單控件 地理定位等等,要說道驚人效果,其中canvas audio video 還有地理定位等就可以夠玩一年 但題目中的一個純字,一下子就將這一群一棒子打死… 因為要玩出驚人效果,就不得不用到js…那么,剩下的可用的就剩語義化標簽,表單控件,新元素等等了.就語義化標簽來說,本身存在的意義僅僅在于”語義化”而已,在視覺上,基本上和普通元素沒什么區別,所以也就無從談起什么驚人效果.那么就剩下表單元素和新增的表單元素類型…

就對于我們開發者而言,就表單元素新增的各種特性,還真算得上有些有用的效果,比如,新增表單類型中的date.要知道,在以前的版本中,這種東西除了用插件,就只能自己手寫,不光是各種事件處理,dom操作,還得編寫復雜的日歷dom結構布局.各種考慮兼容,一不小心,就在哪個版本掛掉了,可是即便用上了插件,也還得去各種查詢api,更主要的是,這些都會增加你的項目體積以及程序復雜程度.然而,當date類型出來之后,我要做的僅僅是只需要將input的type屬性變成date即可 就像這樣:

[html] view plain copy

<input type=“date” />

然后你就會得到這樣的結果:

這在表單開發的過程中可以大大提高開發效率,同時還能有效減小項目體積以及項目的穩定定.然而,好景不長.很快我們發現這個新增的功能很難由我們自己去定義樣式,并且每個瀏覽器上的顯示風格都不一樣,這意味著如果項目需求對頁面的還原度要求很高的話,這個功能瞬間變成雞肋,也就談不上什么驚人了,充其量算是個效果….

也就是說就html部分,能帶給我們的驚人效果實在是有限,這就只能看css了

首先,css本身就是用于處理樣式的,而”驚人效果”無外乎就是視覺體驗,這剛好就是css的拿手好戲.css3中新增的特性非常豐富:2D/3D轉換,過渡,動畫,圓角,陰影,漸變等等等等

其中2D/3D轉換就能很輕易的寫出3D場景

transform : rotateY(45deg); 即可實現如上效果

想要更高級? 沒問題,咱們來個動效

搞定,咱們來看看效果,還是挺不錯的吧.

實際上我們甚至可以通過過渡,加上偽類選擇器,來通過純css來實現輪播圖效果

至于漸變,我們可以通過設置顏色的位置值來實現分界線效果,然后通過巧妙的重復漸變,能夠畫出如下圖案: