CSS3在青島網(wǎng)站制作中的應(yīng)用越來(lái)越廣泛，曾經(jīng)需要用flash或者js做的效果，有些現(xiàn)在通過(guò)css3就可以實(shí)現(xiàn)，只是由于國(guó)內(nèi)的瀏覽器版本都比較低，例如ie6、ie7等還有一定比例的用戶(hù)，這些低版本的瀏覽器都css3的一些效果兼容性比較差。但是這也阻擋不了css3的快速發(fā)展，相信css在青島網(wǎng)站建設(shè)中的應(yīng)用越來(lái)越多。

設(shè)計(jì)重構(gòu)是一家，不光設(shè)計(jì)，從代碼表現(xiàn)上我們也要協(xié)助一起創(chuàng)新。這幾年HTML5,CSS3的發(fā)展非常迅猛，大家都在上面花了不少時(shí)間去學(xué)習(xí)去研究，而以往我們?yōu)榱藢?shí)現(xiàn)一些特殊效果，往往會(huì)借助flash，JS這些技術(shù)，而我們最后決定在活動(dòng)中用CSS3來(lái)代替這2位的工作。

CSS3能做什么呢？

圓角，陰影，漸變，還有目前應(yīng)用還比較少的動(dòng)畫(huà)，變形等等，這些元素結(jié)合起來(lái)可以實(shí)現(xiàn)一些非常驚人的效果。

我們來(lái)看看一些相當(dāng)精彩的應(yīng)用吧！

• MSDN Battlefield CSS3動(dòng)畫(huà) 看他的頭部
  https://developer.mozilla.org/zh-TW/demos/detail/battlefield-css3/launch
  
  頭部的動(dòng)畫(huà)效果非常帥氣，效果幾乎可以和flash媲美，設(shè)計(jì)師在設(shè)計(jì)一些loading畫(huà)面或者大banner條的時(shí)候，可以參考這個(gè)效果；
• Playdulla.com 一個(gè)相當(dāng)贊的CSS3動(dòng)畫(huà)站
  http://playdulla.com/
  
  這個(gè)頁(yè)面利用了視差效果，鑒于目前視差很流行，我們接下來(lái)的活動(dòng)可能會(huì)引入，因此可以作為參考；
• CSS3 helix 一個(gè)3D效果的產(chǎn)品展示
  http://demo.marcofolio.net/css3_helix/
  
  我們很喜歡的一個(gè)效果，我們?cè)O(shè)想是在活動(dòng)的商品列表上應(yīng)用這個(gè)效果，當(dāng)然不能照搬，我們可以簡(jiǎn)化效果，比如讓商品圖片稍微旋轉(zhuǎn)一下；
• CSS3動(dòng)畫(huà)實(shí)現(xiàn)的太陽(yáng)系
  http://neography.com/experiment/circles/solarsystem/
  
  同樣很棒的效果，在做多商品圖片展示的時(shí)候可以利用這個(gè)效果，比如鼠標(biāo)放在商品上圖片可以轉(zhuǎn)動(dòng)并顯示商品相關(guān)信息；
• 超酷的旋轉(zhuǎn)數(shù)字筒
  http://www.webkit.org/blog-files/3d-transforms/poster-circle.html
  
  這個(gè)效果太帥了，可惜應(yīng)用層面不高，或許我們可以把所有商品的圖片全部拼成一個(gè)多面體？

這里特別推薦一個(gè)網(wǎng)站Animate.css是一個(gè)CSS3動(dòng)畫(huà)效果合集，集合了目前所有CSS3的動(dòng)畫(huà)效果,你如果想了解CSS3有哪些動(dòng)畫(huà)效果可以作為參考：

http://daneden.me/animate/

這些都是很棒的應(yīng)用，其實(shí)這些也只是動(dòng)畫(huà)層面的一些應(yīng)用，有了CSS3，我們可以不用圖片，只用代碼就可以做出平時(shí)要去切N張圖做出來(lái)的效果，而且設(shè)計(jì)師同學(xué)也可以知道“哦，原來(lái)我們可以這樣做?。?rdquo;。

當(dāng)然，要在實(shí)際項(xiàng)目中實(shí)踐新技術(shù)是一件有風(fēng)險(xiǎn)的事情，所以我們要對(duì)此進(jìn)行風(fēng)險(xiǎn)評(píng)估，只有保證萬(wàn)無(wú)一失以后才能使用。

JS，F(xiàn)lash等以往實(shí)現(xiàn)的優(yōu)勢(shì)：

• 瀏覽器兼容性非常好，主流的瀏覽器包括遠(yuǎn)古的IE6都可以完美支持;
• JS用市面上五彩繽紛的類(lèi)庫(kù)能夠?qū)崿F(xiàn)很多效果；
• Flash幾乎能夠?qū)崿F(xiàn)你想要的任何效果；

缺點(diǎn)：

• 如果瀏覽器禁用JS，你的代碼就變成純字母了；
• 加載的庫(kù)過(guò)多會(huì)讓用戶(hù)覺(jué)得急躁難耐；
• 各種bug讓你煩不勝煩；
• 哦，你發(fā)現(xiàn)你的iPhone看不了Flash；
• Flash好一點(diǎn)的效果體積都很大，還得外載Flash Player；

考慮到這是個(gè)用戶(hù)體驗(yàn)至上的時(shí)代，于是我們說(shuō)，試試我們的CSS3吧，來(lái)看看CSS3的特點(diǎn)：

• 好帥，不需要任何其他插件或者啥支持；
• 我發(fā)現(xiàn)iPhone也可以正常瀏覽；
• 要對(duì)IE系列說(shuō)再見(jiàn)了；
• 各種瀏覽器前綴；
• 有了他，我在也不用擔(dān)心圓角陰影漸變各種形狀邊框變形了；

看起來(lái)還不錯(cuò)，于是針對(duì)CSS3的特點(diǎn)我們考慮了幾個(gè)解決方案：

• 針對(duì)IE我們降級(jí)處理，這也是CSS3的特點(diǎn)，即使不兼容CSS3的瀏覽器也不會(huì)出現(xiàn)令人煩惱的bug，還是可以正常瀏覽；
• 效果限定幾種，不使用過(guò)多的動(dòng)畫(huà)效果；
• 特殊情況還是可以用JS代替CSS3以保證萬(wàn)無(wú)一失；

準(zhǔn)備充分我們就可以正式搞起了，于是我們?cè)?月拍拍彩鉆節(jié)活動(dòng)中首次引入了CSS3，我們?cè)谑醉?yè)的banner中使用了CSS3來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，并且在類(lèi)目分會(huì)場(chǎng)中的一些細(xì)節(jié)也引入了CSS3的其他功能來(lái)增加亮點(diǎn)。

活動(dòng)地址：http://www.paipai.com/caizuanjie.shtml

首頁(yè)用CSS3中的延遲屬性來(lái)達(dá)到類(lèi)似Flash時(shí)間軸一樣的動(dòng)畫(huà)效果，在所有元素加載完以后，花朵會(huì)時(shí)快時(shí)慢的轉(zhuǎn)動(dòng)，云彩和周?chē)男u會(huì)慢慢的浮動(dòng)，給人一種非常舒服的感覺(jué)。

3月大促取得比較令人滿(mǎn)意的反響，這種新穎的應(yīng)用讓人眼前一亮，于是我們決定在接下來(lái)的4月拍拍旅游季活動(dòng)中繼續(xù)加大使用力度，在首頁(yè)整屏都使用了CSS3動(dòng)畫(huà)。

活動(dòng)地址：http://www.paipai.com/fangjia.shtml

首頁(yè)的每個(gè)類(lèi)目logo都使用了CSS3效果來(lái)加強(qiáng)展示，每個(gè)logo在首頁(yè)加載完后都和云彩一樣漂浮著，效果非常贊。

當(dāng)然，除了活動(dòng)，在平時(shí)的類(lèi)目頻道的一些小細(xì)節(jié)也會(huì)使用一些基礎(chǔ)的CSS3屬性，大家都愛(ài)用我們當(dāng)然更要用，例如女裝頻道和運(yùn)動(dòng)頻道的logo區(qū)：

右下角下浮層：

等等，雖然低級(jí)瀏覽器不兼容，但是針對(duì)現(xiàn)代瀏覽器的用戶(hù)還是能找到不少驚喜的！

當(dāng)然，CSS3不是完美的，正如前面所說(shuō)的，CSS3存在很多缺陷：

• 為了實(shí)現(xiàn)效果會(huì)使用大量獨(dú)立圖片，增加網(wǎng)頁(yè)請(qǐng)求數(shù)，而且花費(fèi)大量的時(shí)間來(lái)切圖；
• 你必須給IE6PNG24做兼容；
• 大量的前綴讓代碼看起來(lái)十分冗長(zhǎng)；
• 過(guò)多的CSS3動(dòng)畫(huà)效果，特別是持續(xù)的動(dòng)畫(huà)效果會(huì)讓webkit瀏覽器明顯變慢，配置不是很好的機(jī)器幀數(shù)可能會(huì)在20以下（親測(cè)結(jié)果）；

在以后的活動(dòng)中，我們?cè)谒伎紟追N中和的解決方案：

• JS仍然在我們的考慮范圍，JS+CSS3的組合被證明是非常好的一個(gè)方式，可以用少量的JS和CSS3結(jié)合做出更好的效果；
• 盡量使用一次性的動(dòng)畫(huà)效果，infinite無(wú)限循環(huán)莫濫用；
• 使用一些工具來(lái)自動(dòng)生成內(nèi)核前綴，來(lái)節(jié)約書(shū)寫(xiě)時(shí)間；

最后結(jié)論是我們?nèi)匀还膭?lì)使用，適當(dāng)?shù)氖褂脮?huì)給項(xiàng)目增加很多亮點(diǎn)，低級(jí)瀏覽器不兼容但是也不出錯(cuò)是他的最大優(yōu)點(diǎn)，除了這點(diǎn)沒(méi)有任何不適，并且對(duì)重構(gòu)本身的技術(shù)能力提升也有非常大的幫助，在以后的運(yùn)營(yíng)活動(dòng)中，我們?nèi)匀粫?huì)繼續(xù)支持使用CSS3來(lái)讓活動(dòng)更加有創(chuàng)意。

利用CSS3做的動(dòng)畫(huà)，在兼容性、速度、安全性方面，都要比f(wàn)lash、js制作好的多，例如在移動(dòng)設(shè)備的兼容性等，既安全有速度穩(wěn)定，CSS3應(yīng)用也將越來(lái)普及。