我們，作為重構工程師，必定要更關心他面前的技術改造，那就是css3的支撐了！上次，加菲貓曾經給我們演示了夸大的css3動畫。而這次，我們從細節動手，看看css3碰到weibo，會給人什么等待 。
當然在這之前，得先理解下造訪weibo.com的各位大俠的神器占比：
PS：（數據來自新浪微博“產品數據剖析后臺”的2012年1月份閱讀器占比）
圖標中可以看出，IE6占比逐步升高，而支撐css3的閱讀器，也擁有了相當的份額，也就意味著，我們一方面可以更多有挑選的保持IE6的兼容，另外，也可以在支撐CSS3的高版本閱讀器上做更多的思索。
而詳細在哪些細節上可以思索如虎添翼呢？此文僅做舉一反三，討論下哪些css3的成效可以在產品細節上有所出現，而我們也會在此文之后，盡快在微博的優化中，把提到的這些逐步上線！
應用偽類晉升用戶體驗
比方說文本，自己在閱讀網頁的時分，常常會用鼠標反選一些文字形式，用來便當閱讀。這時分網頁文字一般出現高亮白色文字+藍底背風光顯現。如下圖：
但是微博主站有不同的皮膚，深深淺淺。當碰到一個暗色皮膚背景，仍然顯現藍底兒白字，那成效就不是特地帥氣了。這時分，實在可以思索用偽類selection為網頁文字的高亮提供了設想計劃，來改動反選展現成效。鼠標選中文字后可設置相應的背風光和文字色，以至是通明。復雜一個屬性就表現了產品對用戶操縱的關心，從而晉升用戶使用感受。
應用突變字色晉升視覺沖擊
隨著css3的普遍使用，文字色突變成效也越來越遭到設想師和前端工程師的喜愛。一個優良的突變可以使文字看起來有質感，似乎刻在紙面上一樣，從而給用戶一個優良的視覺感受。我們可以應用CSS3支撐的文字通明，顯現背景突變的方式來模仿文字突變。再加上一些過渡動畫成效，我們以至可以模仿一個復雜的跑馬燈的成效了。如下圖：
哈哈。不過別對這個設想認真。這只是一個示范，不代表我們UDC的品嘗。
應用鼠標交互晉升快感
鼠標點擊（click）、滑過（hover）、激活（active）操縱還是當今webPC端上最主要的幾個交互方式。新浪微博上大局部的互動操縱也來自于此。以V4寬版為例以后微博主站可以有鼠標交互操縱的模塊大致包括：頂導，左側欄導航，勛章列表，feed區，右側欄皮膚挑選按鈕，皮膚挑選彈層……
比方微博左側導航的勛章欄，那里的向下展開操縱區，在鼠標滑過期固然有背風光變換，但略顯僵硬。工夫久了，或許用戶會對這種變換覺得厭倦了。沒聯系，如今我們可以經過CSS3可以把這里玩兒活。CSS3過渡屬性（transition）的出現，可以很好的處理這個題目。經過設定過渡工夫，可以讓這種成效有一個進程化的變化成效，讓鼠標滑過的變化成效，用溫和的漸顯漸隱來處置。這樣便改善了高聳的視覺變化，同時給人一種文雅的操縱感受。
那么延長設想，當點擊了勛章展開操縱區之后，勛章模塊由本來的一行，變成局部展開。嘭的一下，幾十枚勛章跳進去，那這個展開成效是不是也可以采用剛剛那個溫和的方式展開呢？在CSS3降生之前，這種成效只能經過js幫助完成。而如今，這種成效交給CSS動畫處置再適宜不過了。CSS3不只可以掌握展開的速度函數，而且可以設置展開形式的通明度。當然，只要初級閱讀器可享用哦，親～
應用動畫成效吸收眼球
在攝影作品中，考究布局不要太死，要給照片“留口吻”。鑒戒到網頁設想中，這個說法異樣有它的具有意義。先看看我們的微博首頁，各個模塊之間擠在一同，看下去布局有點悶，這時分，右上角那個彩虹按鈕就成了點睛之筆。
實在這個設想是持續了之前新浪博客的設想。如圖
可以事先由于完成本錢的緣由，新浪博客這里使用flash設想了鼠標滑過的動畫。我們再來看如今搜狐微博的例子，鼠標劃過，溫和展開：
他次要經過js工夫來掌握按鈕外層的class名123的切換，在延續切換三次后模仿了這種溫和的展開成效。
而如今的新浪微博的狀況是用戶鼠標滑過，彩虹復雜跳一下，假如覺得“靈氣”少了點，那么好，我們可以想法加上一些成效看看。
應用css3復雜加上一些五角星愉快的旋轉飛出，然后淡出的成效。這樣給人一種愉快生動的覺得，似乎點擊里會有一些欣喜。這樣既滿意了當今諸多互聯網產品期望給頁面增加生動感的請求，又使得我們的頁面不至于太悶，同時更能勾起用戶的點擊愿望。順次為五角星飛出的4個霎時形態，如下圖：
是不是很path？當然這只是一個示范，不代表我們UDC的品嘗。
應用按鈕多態成效晉升直觀覺得
我們設想的時分都會思索按鈕的三態（即便沒有active，至多也要保證有link和hover吧）。按鈕的三態用來模仿用戶的點擊進程，一個好的按鈕設想可以大幅增加用戶的點擊欲，特地是一些電商網站上，一個button制造的能否優良，能否吸收人點擊，以至可以間接影響到電商網站的終極成交量。
而CSS3的到來，經過動畫，突變再加上按鈕過渡成效，暗影等屬性的使用，則可以愈加精密的模仿整個用戶點擊的進程，使得用戶在整個操縱的交互進程都變得愉悅且舒適。比方下圖我做的這個分離CSS3 3D所模仿的平面鍵盤成效。自己可以看到Z、X、N、M鍵是被按下的成效，其他是沒有被按下的成效，假如用戶在長按住按鈕的時分，還會出現按鍵模仿被按下的進程動畫。被按下后光線投影不變，而文字的凹凸感改動。這樣便比擬精密的模仿了用戶點擊進程
看到這，各位看官可以笑了，你這都是夸夸其談啊，都是還沒上線的設想。當然路是一步步走的，飯是一口口吃的，我們不可以一下子就把這么多優化設想一步上線，但實在我們在線上也有一些細節是用到了css3的些許特性。
比方在剛上線的微公益中多處鼠標劃過都使用了過渡屬性，使得鼠標滑過成效溫和且文雅。
還有投票項目，用戶鼠標滑過參與者小頭像，有0.2秒的過渡變化和2像素的綠色暗影分散成效，這樣可以優良的提-示用戶以后所劃過的用戶。
實在很多交互細節成效是無法體如今設想稿上的，這就需求我們工程師有必定的尖銳和直覺，最好可以在UE稿進去后就跟交互設想師商榷一些詳細可行的交互計劃，進而進步我們的產品使用體驗。
而且css3受累于國際閱讀器占比-的現狀，無法大面積使用。但我想，作為行業內的一分子，從細節動手，逐步進步本人網站在高版本閱讀器下的細節質量，幾也會影響到高版本閱讀器的促進。假如您由于看了這遍文章，而去晉級了本人的閱讀器，開端嘗試使用firefox和chrome，那這篇文章就勝利啦。第一次在UDC博客發博文，讓各位大牛見笑了。
網頁設計,SEO,古董拍卖
