早就有把皮膚換了的打算，直到上周五才開始動手。
本身沒做過設計的工作，處理起顏色來還是比較蛋疼的。公司某頁面推薦了hailpixel （http://color.hailpixel.com/）配色就靠這個了，雖說我不懂配色，拾取的顏色也有細微區別，取幾個顏色看着舒服就這么定下來了。
作為一個做前端的，自然是不畫PSD直接上來寫。之前總是想先把設計搞出來再開始寫頁面，這也是一直沒有動手的原因。周五在等設計圖的空閑突然想寫了，直接來寫倒是挺好。寫了一個頭部樣式之后，感覺之后的必須得那樣寫才行。也就是傳說中的風格定下來了吧。
寫界面的過程中用了不少CSS3動畫。在這里總結一下吧。
1.導航條。
首先導航條的顏色不同是用CSS選擇器做的。用到了nth-child()。括號里是幾就選擇第幾個。設為nth-child(2n)的話選擇的就是第偶數個。
先將所有li元素都定義了一個:hover{height:100px;margin-top: }，然后發現這樣第一個太丑，於是定義了一個li:nth-child(1):hover{width: height: }
2.首頁的文章標題。
文章標題用到了2D變換。
transform:rotate(10deg):順時針旋轉10度
其他的2D變換還有
transform: translate(50px,100px) ：向左移動50px，向上移動100px
transform: scale(2,4)：長變為2倍，高變為4倍。（看到了這個屬性才知道也許導航條那里的效果可以通過這個來實現）
transform: skew(30deg,20deg)：水平翻轉30度，豎直翻轉20度
其實在選擇做2D變換之前我也嘗試了3D變換，不過覺得奇奇怪怪的。
用transform: rotateX(360deg)可以讓元素水平翻轉360度，我一開始寫的便是這個，用了以后簡直翻花眼，也許把transition設得大一點會好一些？
同樣的transform: rotateY(360deg)就是讓元素垂直翻轉。
文章標題的背景顏色設置我也用了nth-child選擇器設置。
3.其他一些鏈接
我嘗試性地把一些鏈接的:hover設置為font-size和color改變，效果還不錯。或許可以嘗試一下改變font-family。
4.文章頁面的綠色通道
我一直覺得這綠色通道太丑太low，幸好都比較好改。果斷將原來的background取消掉，換成了我自己取的顏色加了圓角。文字加了text-shadow，hover的時候文字陰影變了個顏色。
text-shadow的設置和box-shadow一樣，前兩個是陰影距離，然后是擴散大小，最后是顏色。
5.其他一些
其他也就是改改字體顏色，改改透明度的事情。
還有文章頁面，我覺得還可以改進一下。特別是那個支持和反對，以前看着就丑，現在感覺更丑，跟整體界面根本不搭有沒有。
好的，這篇隨筆就是這樣。
忘了說，不要用IE訪問，我沒做兼容！
----------------
換了顯示器果然好丑。決定重新弄一下顏色。感謝評論里大家的建議！
本篇博客重在總結CSS動畫，（雖說比起那些知名博主寫的差很多）,顏色的話就私自改起來了。