運營活動CSS3實踐,講述CSS3的獨特魅力

如今消費者的胃口越來越挑剔,各大電商平台都絞盡腦汁想要玩出點新花樣來吸引更多的用戶,更多的下單量,更多的成交量,這就難為了設計師每次促銷活動都要設計出更炫更有創意的頁面來滿足大家犀利的審美觀。所以今天來和你分享一些將css運用得活靈活現作品

文章來源:http://www.w3cfuns.com/article-1266-1.html

計重構是一家,不光設計,從代碼表現上我們也要協助一起創新。這幾年HTML5,CSS3的發展非常迅猛,大家都在上面花了不少時間去學習去研究,而以往我們為了實現一些特殊效果,往往會藉助flash,JS這些技術,而我們最後決定在活動中用CSS3來代替這2位的工作。

 

CSS3能做什麼呢?
圓角,陰影,漸變,還有目前應用還比較少的動畫,變形等等,這些元素結合起來可以實現一些非常驚人的效果。

我們來看看一些相當精彩的應用吧!

MSDN Battlefield CSS3動畫 看他的頭部

瀏覽網址:https://developer.mozilla.org/zh-TW/demos/detail/battlefield-css3/launch

 

CSS3 helix 一個3D效果的產品展示

瀏覽網址:http://demo.marcofolio.net/css3_helix/

我們很喜歡的一個效果,我們設想是在活動的商品列表上應用這個效果,當然不能照搬,我們可以簡化效果,比如讓商品圖片稍微旋轉一下

 

CSS3動畫實現的太陽系

瀏覽網址:http://neography.com/experiment/circles/solarsystem/

同樣很棒的效果,在做多商品圖片展示的時候可以利用這個效果,比如鼠標放在商品上圖片可以轉動並顯示商品相關信息

 

超酷的旋轉數字筒

瀏覽網址:http://www.webkit.org/blog-files/3d-transforms/poster-circle.html

這個效果太帥了,可惜應用層面不高,或許我們可以把所有商品的圖片全部拼成一個多面體?

 

當然,要在實際項目中實踐新技術是一件有風險的事情,所以我們要對此進行風險評估,只有保證萬無一失以後才能使用。

JS,Flash等以往實現的優勢:
瀏覽器兼容性非常好,主流的瀏覽器包括遠古的IE6都可以完美支持;
JS用市面上五彩繽紛的類庫能夠實現很多效果;
Flash幾乎能夠實現你想要的任何效果;
缺點:
如果瀏覽器禁用JS,你的代碼就變成純字母了;
加載的庫過多會讓用戶覺得急躁難耐;
各種bug讓你煩不勝煩;
哦,你發現你的iPhone看不了Flash;
Flash好一點的效果體積都很大,還得外載Flash Player;
考慮到這是個用戶體驗至上的時代,於是我們說,試試我們的CSS3吧,來看看CSS3的特點:

好帥,不需要任何其他插件或者啥支持;
我發現iPhone也可以正常瀏覽;
要對IE系列說再見了;
各種瀏覽器前綴;
有了他,我在也不用擔心圓角陰影漸變各種形狀邊框變形了;
看起來還不錯,於是針對CSS3的特點我們考慮了幾個解決方案:

針對IE我們降級處理,這也是CSS3的特點,即使不兼容CSS3的瀏覽器也不會出現令人煩惱的bug,還是可以正常瀏覽;
效果限定幾種,不使用過多的動畫效果;
特殊情況還是可以用JS代替CSS3以保證萬無一失;
準備充分我們就可以正式搞起了,於是我們在3月拍拍彩鑽節活動中首次引入了CSS3,我們在首頁的banner中使用了CSS3來實現動畫效果,並且在類目分會場中的一些細節也引入了CSS3的其他功能來增加亮點。

瀏覽網址:http://www.paipai.com/caizuanjie.shtml

 

3月大促取得比較令人滿意的反響,這種新穎的應用讓人眼前一亮,於是我們決定在接下來的4月拍拍旅遊季活動中繼續加大使用力度,在首頁整屏都使用了CSS3動畫。

瀏覽網址:http://www.paipai.com/fangjia.shtml

 

當然,CSS3不是完美的,正如前面所說的,CSS3存在很多缺陷:

為了實現效果會使用大量獨立圖片,增加網頁請求數,而且花費大量的時間來切圖;
你必須給IE6PNG24做兼容;
大量的前綴讓代碼看起來十分冗長;
過多的CSS3動畫效果,特別是持續的動畫效果會讓webkit瀏覽器明顯變慢,配置不是很好的機器幀數可能會在20以下(親測結果);
在以後的活動中,我們在思考幾種中和的解決方案:

JS仍然在我們的考慮範圍,JS+CSS3的組合被證明是非常好的一個方式,可以用少量的JS和CSS3結合做出更好的效果;
盡量使用一次性的動畫效果,infinite無限循環莫濫用;
使用一些工具來自動生成內核前綴,來節約書寫時間;
最後結論是我們仍然鼓勵使用,適當的使用會給項目增加很多亮點,低級瀏覽器不兼容但是也不出錯是他的最大優點,除了這點沒有任何不適,並且對重構本身的技術能力提升也有非常大的幫助,在以後的運營活動中,我們仍然會繼續支持使用CSS3來讓活動更加有創意。

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s