周末小哥我看完了幾個星期沒追的行屍走肉和生活大爆炸（感謝大A站！）,感覺生活真的好空虛，沒想到我現在居然會對游戲失去了興趣！！！代碼的魔力真的是無法用語言形容。。。（我真假。。。）百無聊賴，在電腦上裝了個sublime text，准備寫幾行代碼滿足一下我空虛的心靈。那感覺真是，春風拂過瀘沽湖，秋雨浸潤九寨溝！（我是小哥。。。不是小益達。。。）尤其感受了那css3狂拽酷炫叼炸天的各種效果。真心覺得，web前端是個充滿驚喜的編程工作！
說一些題外話，裝上sublime text3時，小哥我的所有css3語法都不能夠高亮顯示，雖然語法沒問題。可以執行，但是跟css高亮一比，有強迫症的我怎么看怎么覺得別扭。在百度上Google一下發現了解決的方法。分享給大家。
大家可以看一看對比圖：
左側為未高亮顯示，右側為高亮顯示，是不是感覺看上去有一種莫名的酸爽！
1.首先我們打開sublime text3 ，然后ctrl+shift+p,打開控制台（package control），選擇Add Repository ，輸入以下網址： https://github.com/i-akhmadullin/Sublime-CSS3
2.之后選擇：Install Package：Sublime-CSS3。
3.在菜單中點擊查看>語法>打開具有當前當前拓展名的。。。>CSS3 搞定！
方法來源：https://github.com/i-akhmadullin/Sublime-CSS3 （國外的大神太多了~而且都是洋碼子，看着就牛x！）
言歸正傳，這兩天一直在研究css3的效果，其中的transition帶給我的神奇感覺，在此分享給大家！
transition(過渡效果)有四個屬性值：transition-property(過渡效果屬性名稱)、
transition-duration(過渡效果持續時長)、
transition-timing-funcition(過渡效果的速度曲線)、
transition-dalay(過渡效果延時生效時長)。
transition屬性同樣也有簡寫方式，即依次按上面的順序寫出即可。下面的代碼為：寬度改變 改變時長為兩秒 遵循的時間函數為勻速 延時2s進行。
-webkit-transition:width 2s linear 2s,
下面是我自己寫的一個demo。大家可以看一下效果。
html代碼如下：
<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>過渡</title> 6 <link rel="stylesheet" type="text/css" href="過渡.css"> 7 </head> 8 <body> 9 <div>效果展示</div> 10 </body> 11 </html>
css代碼如下：
div{ width:100px; height:100px; background-color: blue; -webkit-transition:width 2s,height 2s ,-webkit-transform 2s;/*簡寫方式 改變的屬性名 改變時長*/ -webkit-transition-timing-function:cubic-bezier(0.25,0.1,0.251); /*改變的時間函數 linear ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n) */ -webkit-transition-delay:1s; /*改變效果延時響應*/ } div:hover{ width:200px; height: 200px; -webkit-transform:rotate(1080deg); }
其中有一點需要說明的是transition-timing-function屬性。屬性值除了預設的linear ease等，還遵循貝塞爾曲線函數，后面設定四個0~1的參數。大家有興趣可以研究一下。
希望大家的it路越來越寬！哥斯拉與君同行！