瀏覽器，作為一神器，幫我們開啟了繽紛萬千的網路世界視窗。而她發展到今天，也誕生了乙個又乙個的懷神版本，可能有人鍾情於她的花哨，有人痴迷於她的速度……我們，作為重構工程師，必然要更關注他背後的技術革新，那就是css3的支援了！上次，加菲貓已經給我們演示了誇張的css3動畫。而這次，我們從細節入手，看看css3遇到weibo，會給人什麼期待 。
當然在這之前，得先了解下拜訪weibo.com的各位大俠的神器佔比：
圖示中可以看出，ie6佔比逐漸降低，而支援css3的瀏覽器，也占有了相當的份額，也就意味著，我們一方面可以更多有選擇的放棄ie6的相容，另外，也可以在支援css3的高版本瀏覽器上做更多的考慮。
而具體在哪些細節上可以考慮錦上添花呢？此文僅做拋磚引玉，**下哪些css3的效果可以在產品細節上有所呈現，而我們也會在此文之後，盡快在微博的優化中，把提到的這些逐步上線！
利用偽類提公升使用者體驗
但是微博主站有不同的**，深深淺淺。當遇到乙個暗色**背景，依然顯示藍底兒白字，那效果就不是特別帥氣了。這時候，其實可以考慮用偽類selection為網頁文字的高亮提供了設計方案，來改變反選展示效果。滑鼠選中文字後可設定相應的背景色和文本色，甚至是透明。簡單乙個屬性就體現了產品對使用者操作的關懷，從而提公升使用者使用感受。
利用漸變字色提公升視覺衝擊
隨著css3的廣泛使用，文本色漸變效果也越來越受到設計師和前端工程師的青睞。乙個良好的漸變可以使文字看起來有質感，彷彿刻在紙面上一樣，從而給使用者乙個良好的視覺感受。我們可以利用css3支援的文字透明，顯示背景漸變的方式來模擬文字漸變。再加上一些過渡動畫效果，我們甚至可以模擬乙個簡單的跑馬燈的效果了。如下圖：
哈哈。不過別對這個設計當真。這只是乙個示範，不代表我們udc的品味。
利用滑鼠互動提公升快感
比如微博左側導航的勳章欄，那裡的向下展開操作區，在滑鼠滑過時雖然有背景色變換，但略顯生硬。時間久了，也許使用者會對這種變換感覺厭倦了。沒關係，現在我們可以通過css3可以把這裡玩兒活。css3過渡屬性（transition）的出現，可以很好的解決這個問題。通過設定過渡時間，可以讓這種效果有乙個過程化的變化效果，讓滑鼠滑過的變化效果，用柔和的漸顯漸隱來處理。這樣便改善了突兀的視覺變化，同時給人一種優雅的操作感受。
那麼延伸想象，當點選了勳章展開操作區之後，勳章模組由原來的一行，變成全部展開。嘭的一下，幾十枚勳章跳出來，那這個展開效果是不是也可以採用剛剛那個柔和的方式展開呢？在css3誕生之前，這種效果只能通過js幫忙實現。而現在，這種效果交給css動畫處理再合適不過了。css3不僅能夠控制展開的速度函式，而且可以設定展開內容的透明度。當然，只有高階瀏覽器可享用哦，親～
利用動畫效果吸引眼球
在攝影作品中，講究布局不要太死，要給**「留口氣」。借鑑到網頁設計中，這個說法同樣有它的存在意義。先看看我們的微博首頁，各個模組之間擠在一起，看上去布局有點悶，這時候，右上角那個彩虹按鈕就成了點睛之筆。
他主要通過js時間來控制按鈕外層的class名123的切換，在連續切換三次後模擬了這種柔和的展開效果。
利用css3簡單加上一些五角星歡快的旋轉飛出，然後淡出的效果。這樣給人一種歡快活潑的感覺，彷彿點選裡會有一些驚 喜。這樣既滿足了當今諸多網際網路產品希望給頁面新增活潑感的要求，又使得我們的頁面不至於太悶，同時更能勾起使用者的點選慾望。依次為五角星飛出的4個瞬間 狀態，如下圖：
是不是很path？當然這只是乙個示範，不代表我們udc的品味。
利用按鈕多型效果提公升直觀感覺
我們設計的時候都會考慮按鈕的三態（即使沒有active，至少也要保證有link和hover吧）。按鈕的三態用來模擬使用者的點選過程，乙個好的 按鈕設計可以大幅增加使用者的點選欲，特別是一些電商**上，乙個button製作的是否精良，是否吸引人點選，甚至可以直接影響到電商**的最終成交量。
而css3的到來，通過動畫，漸變再加上按鈕過渡效果，陰影等屬性的使用，則可以更加細緻的模擬整個使用者點選的過程，使得使用者在整個操作的互動過程都變得愉悅且舒服。比如下圖我做的這個結合css3 3d所模擬的立體鍵盤效果。大家可以看到z、x、n、m鍵是被按下的效果，其餘是沒有被按下的效果，如果使用者在長按住按鈕的時候，還會出現按鍵模擬被按下的過程動畫。被按下後光線投影不變，而文字的凹凸感改變。這樣便比較精細的模擬了使用者點選過程
比如在剛上線的微公益中多處滑鼠劃過都運用了過渡屬性，使得滑鼠滑過效果柔和且優雅。
還有投票專案，使用者滑鼠滑過參與者小頭像，有0.2秒的過渡變化和2畫素的綠色陰影擴散效果，這樣可以良好的提示使用者當前所劃過的使用者。
其實許多互動細節效果是無法體現在設計稿上的，這就需要我們工程師有一定的敏銳和直覺，最好能夠在ue稿出來後就跟互動設計師商榷一些具體可行的互動方案，進而提高我們的產品使用體驗。
而且css3受累於國內瀏覽器佔比的現狀，無法大面積使用。但我想，作為行業內的一分子，從細節入手，逐步提高自己網 站在高版本瀏覽器下的細節品質，多少也會影響到高版本瀏覽器的推進。如果您因為看了這遍文章，而去公升級了自己的瀏覽器，開始嘗試使用firefox和 chrome，那這篇文章就成功啦。第一次在udc部落格發博文，讓各位大牛見笑了。
Web前端開發 CSS3之3D變換
2d變換僅是在電腦螢幕平面的變換，而3d變換則是空間三個方向的變換，可以是單個方向，也可以三個方向組合，3d變換用的也是transform屬性，不同的是rotate 要加上單個方向的軸系如rotatex 同時在3d變換時需要使用transform style屬性宣告使用的是 3d變換，為了讓視覺更好...
前端開發CSS3 使用方式和選擇器
css是cascading style sheets 層疊樣式表 的簡寫，用於修飾文件的語言，可以修飾html xml svn。每個語言都有每個語法的規則 css宣告 css宣告塊 css選擇器 css規則。1 css宣告簡單來說就是乙個鍵值對的形式，類似於 color black 2 css宣告塊...
前端開發推薦 建立CSS3漂亮的動畫選單
使用css3可以打造出非常漂亮的導航效果，在今天的教程中我將建立選單項懸停效果，很容易地通過編輯 css 檔案進行自定義，沒有使用任何影象,我會在水平和垂直位置的背景按鈕進行動畫處理。當你把滑鼠移到選單項的時間，將會湧現非常膩滑的滑動結果，下面就一路來看看這個簡樸美麗的css3動畫選單吧。選單結構是...