據(jù)傳說有研究表明凝視美女能增加壽命、放松心情、緩解壓力等等好處。為啥我見了美女只會血壓升高、情緒激動？難道你們所說的美女圖和我理解的美女圖我們不在一個頻道？還是我太邪惡了？哈哈，隨便搜索到一只EMT美女，放出來緩解下情緒，會更有利于集中精神來裝逼。廢話不多說，上圖……

EMT

背影殺……好吧，興奮之后血壓提高了，腦部供血也足夠了。我們先不管她了，開始說今天的主題吧。CSS中有好多屬性可以顯得自己逼格box-shadow\text-shadow、transition、簡寫規(guī)則等等；中級裝逼利器animation、屬性選擇器、偽類等等；高級裝逼利器有CSS變量、正則表達(dá)式、transform等等。注意！這個標(biāo)準(zhǔn)不是單純靠難度來劃分的。

沒辦法在頁面上沒法放代碼，我把效果圖做成了GIF，我們來看看圖：

CSS入門級裝B利器transition

是不是覺得自己的逼格瞬間高了起來？動畫耶~ 怎么做到的呢，這就是今天要說的入門級的裝逼利器transition屬性。這是一個CSS3中新增的屬性，從單詞字面意思理解它的意思是過渡，它的定義是允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值。嘗試完demo,了解完定義，是不是覺得誰用誰閃亮啊，平滑的動畫效果，能讓交互變得更細(xì)膩親和。

transition在CSS3中算是比較強(qiáng)悍的屬性了，當(dāng)然還有其他更牛更強(qiáng)大的屬性，有機(jī)會我專門寫文章說明。今天只說它，需要注意的是Internet Explorer 9 以及更早版本的瀏覽器不支持transition屬性。Safari需要前綴-webkit-transition屬性。其他的瀏覽器全部支持。transition是transition-property、transition-duration、transition-timing-function、transition-delay這四個屬性的簡寫屬性。簡寫的規(guī)則是:

transition: property duration timing-function delay;

逐個來介紹，先來說transition-property。它是設(shè)置已發(fā)生了變化的CSS屬性的屬性名，有點繞嘴。簡單解釋下就會了解。比如想要讓高度height的變化有過渡效果，就寫transition:height 1s;。前提是height發(fā)生了變化，例如200px→300px。如果設(shè)置了沒有變化的屬性就不會有任何效果渲染，例如height：200px→200px。

transition-duration是設(shè)置完成過渡需要多少時間，單位是秒s或毫秒ms。需要注意的是這貨的默認(rèn)是零，也就是說不設(shè)置它的話，過渡根本就不可能顯示。這也是我上一段文字中transition:height 1s;會寫上1s的原因，重要的地方提醒自己要牢記。小tips:1s=1000ms.

transition-duration過渡效果的速度曲線，它的存在讓過渡效果出現(xiàn)了平滑感。這貨的值有很多，貼出來看看transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);。具體每個值的作用，我列了個表格：

transition-delay屬性是規(guī)定過渡何時開始，單位是秒s或毫秒ms。這個很好理解，比如設(shè)置了transition-delay:1.5s;就是過渡動畫1.5S之后開始。拿頁面上的DEMO來說就是如果我設(shè)置了這個屬性和值，那么你的鼠標(biāo)移動上去后1.5s后才會出現(xiàn)過渡效果。小tips:CSS中整數(shù)位是0小數(shù)位非零的時候整數(shù)位可以不寫，例如0.5S可以寫成.5s。

如果transition需要控制的屬性有多個，就需要用半角的英文逗號,將多個屬性隔開。

/*單個屬性設(shè)置，不設(shè)置的項為默認(rèn)值。*/
transition:height 1s; 
transition:color .5s ease-in-out .5s;
/*多個屬性設(shè)置。*/
transition:height 1s,color .5s ease-in-out .5s;

關(guān)于transition的知識點基本都已經(jīng)都在上面了。學(xué)習(xí)的目的是應(yīng)用，應(yīng)用的好就會很驚艷，應(yīng)用的的不好就會很狗shi，不應(yīng)用的話知識點就會被慢慢遺忘。關(guān)鍵點在于如何應(yīng)用……回顧定義我們了解到，能和這貨最頻繁配合的就是:hover和JS了。自身能力有限，并且本篇又是基礎(chǔ)類的介紹。我就不整那些看上去高大上的讓人費解的東西了。簡單的效果有時候最能提現(xiàn)出很驚艷的效果。

用html5中的<nav>標(biāo)簽來做導(dǎo)航會讓我們的代碼更具備語義。搜索引擎的spider理解我們的代碼也會更容易，也會讓我們后期對代碼的維護(hù)工作更容易。對WAI-ARIA無障礙網(wǎng)頁應(yīng)用也會支持的更好。既然有這么多好處，我們就要用一用了。一個簡單的導(dǎo)航：

<nav>
    <a href="">首頁</a>
    <a href="">產(chǎn)品</a>
    <a href="">新聞</a>
    <a href="">關(guān)于</a>
</nav>

nav a{
    margin:0 5px;
    padding: 5px 10px;
    border-radius: 3px;
    border: thin solid #aaa;
    background-color: #eee;
    text-decoration: none;
    color: #6492eb;
}

直接上圖說結(jié)果……

再之后的工作就是給<a>添加:hover偽類樣式。這樣三搞兩不搞的一個簡單的導(dǎo)航就出現(xiàn)在眼前。不過這樣的效果是無法裝逼的，我們還需要transition這個利器來提升逼格，讓我們快捷便利的進(jìn)入裝逼模式。添加transition之后的代碼樣式如下:

nav a{
    margin:0 5px;
    padding: 5px 10px;
    border-radius: 3px;
    border: thin solid #aaa;
    background-color: #eee;
    text-decoration: none;
    color: #6492eb;
    transition:background-color 2s,color 2s,border 3s ease-out .5s;   /*這行是新增的代碼*/
}
nav a:hover{
    background-color: black;
    color: snow;
    border: thin solid red;
}

別說你看不懂，文章開篇已經(jīng)把參數(shù)的意思介紹的很清楚了。看看完成之后的樣子吧，整體效果就是下面的樣子,可以用鼠標(biāo)在導(dǎo)航demo上面移動幾次嘗試下，是不是比沒有加transition的效果要炫的很多？

不要糾結(jié)文字的顏色和效果，因為我懶的去解決CSS繼承的問題，這些全都是小case，我們主要是看原理。如果說真的要想看沒被“污染”的效果或者很糾結(jié)transition到底要放到<a>里面還是應(yīng)該放到偽類:hover里面，我寫了一個DEMO作為展示和對比，想看就看>>>猛戳這兒<<<
.
.
.
.
.
開什么玩笑，不可能！雖然是初級裝逼利器，但是初級也分低檔中檔高檔好不好_{下面就開啟中級裝逼模式}讓裝逼亮瞎別人的氪金狗眼吧！

想讓畫面更炫更有設(shè)計感，單純的transition已經(jīng)滿足不了，必須配合使用其他技術(shù)才能實現(xiàn)。當(dāng)icon fonts技術(shù)和transition碰撞會發(fā)生什么？

舉個例子最能說明問題，利用icon fonts技術(shù)的fontawesome來和transition配合。代碼還是上面的代碼，但是引入了fontawesome的圖標(biāo)。下面就是示例，可以用鼠標(biāo)移動上去看看……

引入了fontawesome的圖標(biāo)

哦吼~ 逼格又提升了一個檔次！覺得自己帥的不要不要的。嘚瑟啊~ fontawesome的圖標(biāo)都是矢量圖，也就是說可以理論上可以無限放大，但是不會失真。而且引用方便……真的是很方便。不過客戶的需求總是千變?nèi)f化、奇形怪狀的。

若是fontawesome沒有自己要用的圖標(biāo)怎么辦？其實到達(dá)這種裝逼境界的人來說這都不是個問題，解決方案很簡單——自己做圖標(biāo)，利用CSS雪碧技術(shù)（CSS Sprite）。嗯這是不錯的解決方案，很多人都在用。

制作的圖標(biāo)先不說質(zhì)量和設(shè)計問題，首先要解決的是顏色的變化，你會說做幾套顏色不同的圖片就行了。嗯，以前包括現(xiàn)在還是有不少人是用這個解決方案。例如這面這個css雪碧圖↓↓↓↓

css雪碧圖

很是壯觀不是么，看起來應(yīng)該是最優(yōu)的解決方案了，我們都知道任何方案都有自己的缺點和短板，主要是看具體使用環(huán)境是什么。那么這種“雪碧圖”的解決方案的缺點顯而易見的有兩點：1,是圖片容量變大，影響頁面加載速度。2,硬性轉(zhuǎn)換而非過渡線性轉(zhuǎn)換，失去了平滑感交互體驗下降。

嘿嘿~ 其實吧這兩個缺點給屏蔽掉，就行了?？傄杏袀€具體的方法技巧既能使圖片不變大，而且轉(zhuǎn)換還是平滑過渡。我想聰明的你已經(jīng)想的到了——就是把圖片背景換成和網(wǎng)頁背景一致的顏色，把圖標(biāo)鏤空，然后用transition改變圖片父元素背景色就行了~哈哈，這個技術(shù)我給起名叫“圖標(biāo)鏤空背景色過渡技術(shù)”。很巧妙不是么？——這才是真正初級裝逼利器的中級技術(shù)水平。不過這不是我的獨創(chuàng)，我也沒這智商。網(wǎng)絡(luò)上有大神早就把思路技巧給寫出來了，我說過的多查資料多查文檔才能無往不勝。

下面的展示完全可以考慮成這是一個圖標(biāo)的樣子，因為我的頁面有背景花紋，所以圖片我沒法處理成背景色。將就看吧，原理才是最主要的。顏色很丑，主要原因是想讓顏色對比強(qiáng)烈一些，例子也就容易看一些。

/*css代碼*/
div.demo{
    width:圖片寬;
    height:圖片高;
    background-color: blue;
    transition:background-color 2s;
}
div.demo:hover{
    background-color: red;
}
/*html代碼*/
<div class="demo"><img src="images url" /></div>

雪碧技術(shù)又可以煥發(fā)光彩了，這些自制的圖標(biāo)也能享受到過渡帶來的好處了。不過這玩意也有缺點，因為是在需要顯示顏色的地方鏤空，那么背景色就不能用透明來處理了，必須要和應(yīng)用這項技術(shù)的頁面展示區(qū)域背景色保持一致。兼容性和擴(kuò)撒性就強(qiáng)差人意了，從我的頁面有背景花紋的情況來看這種技術(shù)的短板就顯露出來了。

根據(jù)尿性，有初級中級，就會高級……沒錯！高級裝逼模式即將開啟?。?！

高級裝逼模式就是jQuery的animate()與transition配合，哈哈具體怎么配合，我也不清楚。哈哈哈，只能是具體情況具體分析。

突然想起來transition并不能對所有的屬性變化都有作用，它是有范圍的……如果是不支持的屬性的話是沒有效果的。copy個表過來吧，原文是英文，我順手翻譯了一下，不對的地方將就看吧！別講究了~主要是為了方便查詢使用。下面就是transition能起作用的CSS屬性。

萬法不離其宗，掌握了原理，了解了思路。加上一點想象力，這樣才會在任何情況下保證自己的創(chuàng)意源源不斷，才能學(xué)以致用、知行合一。這才是學(xué)習(xí)知識最好的實踐！