.trans{
display: inline-block;
padding:1px8px;
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
}
.trans:hover{
background-color:#486AAA;
color:#fff;
}
<ahref="#"class="trans">經過我~~~</a>
當然也可以不用把transition屬性一個一個攤開寫，而是合并。如：
.trans {
display: inline-block;
padding:1px8px;
transition: background-color 0.3s ease;
}

.trans_effect{
display:block;
line-height:100px;
width:100px;
background:#beceeb;
margin:30px auto;
text-align:center;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;    
transition:all 2s ease-in-out;
}
.trans_effect:hover{
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);        
}
<ahref="#"class="trans_effect"></a>

滿足來自觸控設備用戶的流暢體驗

現在觸控設備越來越多，月熊志網站為了響應觸控，在開發中使用了Hammer.js，這個大小僅為3KB 的JS庫，不僅支持常見的鼠標事件，還支持微軟自Windows 8和IE10以來引入的Pointer API，Pointer API封裝了來自觸摸、筆、鼠標的輸入，能夠對用戶的觸控操作進行統一的捕獲和處理，不論用戶使用什么樣的輸入硬件，都能很好的工作。這讓我們可以更容易的去處理例如Tap，Swipe，Drag這些觸控的操作，滿足來自觸控設備用戶的流暢體驗。另外在網站中很多內容我們也專門制作了豐富的觸控交互場景，需要用戶進行一些觸控的操作，了解更多的內容。

技術要點：

Hammer.js是一個專門用于控制、定制手勢的輕量級JavaScript框架，可以識別出常見的觸摸、拖動、長按、縮放等手勢。免去自己監聽底層touchstart、touchmove、touchend事件并且寫一大堆判斷邏輯的痛苦。支持Android、BlackBerry、iOS及Windows觸屏設備。當然，Hammer.js不但支持觸摸屏設備的瀏覽器，在桌面瀏覽器上，也能將鼠標的點擊當做觸摸，方便開發人員在桌面瀏覽器上調試。

使用方法見代碼：

WebGL把Jasper搬到瀏覽器上

月熊志網站的第一部分、使用3D的方式把Jasper栩栩如生的呈現在大家面前，大家可以和他進行交互，并且Jasper也會有非常豐富的動作。網站構建出的3D的場景可以把月熊生長的環境以及氛圍更好的渲染出來，為了更好的展示這些體驗，我們通過WebGL把Jasper搬到瀏覽器上，讓大家了解這種充滿情感的動物。加上一些與Jasper的交互，讓大家能沉浸其中，并且了解月熊的一些特點。

通過Blender這個3D建模軟件構建出了月熊的形象，以及他周圍自然親近的場景，然后結合three.js 這個JavaScript 3D引擎，使得開發者可以在瀏覽器中呈現這些模型和動畫。由于從Blender中導出的這些3D模型的文件體積都比較大，通過網絡去傳輸用戶就需要花費很長的時間去加載，為了保證更為流暢的體驗，不得不想辦法去減小文件的體積，以及在瀏覽器上的響應速度，這完全得益于IE11的硬件加速以及WebGL的高效，可以給大家帶來可以在瀏覽器上運行場景豐富，動畫流暢的3D體驗。

技術要點：

WebGL：2009年，Khronos Group把這樣的OpenGL技術運用到Web瀏覽器并制定了WebGL。WebGL是OpenGL和JavaScript之間的結晶、HTML5的canvas元素里、利用和OpenGL同樣的API、可以繪制高精度的三維圖像?，F在，占有最大瀏覽器份額的IE11支持WebGL技術。可以說IE11推進了用戶的3D體驗。

Blender是一個開源的多平臺輕量級全能三維動畫制作軟件，提供從建模，動畫，材質，渲染，到音頻處理，視頻剪輯的一系列動畫短片制作解決方案。blender以python為內建腳本，支持yafaray渲染器，同時還內建游戲引擎。Blender為全世界的媒體工作者和藝術家而設計，可以被用來進行3D可視化，同時也可以創作廣播和電影級品質的視頻，另外內置的實時3D引擎讓制作獨立回放的3D互動內容成為可能。

WebGL不提供縮放或旋轉等矩陣函數。因此，繪制 3D 圖形通常使用Three.js 庫（大約一半WebGL 網頁使用）等通用庫就可以完成困難或重復的繪制任務。three.js的代碼托管在github上面。

下面使用three.js創建個簡單的3D模型

1.設置場景

現在有了一個場景，一個相機和一個渲染器，利用Three.js畫球體、平面、立方體、圓柱體等基元：

3.創建材質

 4.光 

如果你現在就想渲染場景，你會看到一個紅色的圓。雖然在球體上覆蓋了朗伯面材質，但場景里沒有光。所以按照默認設定，Three.js會恢復到滿環境光，物體的看上去的顏色就是物體表面的顏色。添加一個簡單的點光源：

顯然，關于渲染器的一切都設置好了。萬事俱備，我們現在只需要：

如果你花點時間去瀏覽一遍Three.js的源代碼，你會發現很多對象都繼承自Object3D。這個基類包含了很多有用的屬性，比如位置、旋轉和縮放的信息。特別的，我們的球體是一個Mesh對象，而Mesh對象繼承自Object3D對象，但是又增加了些自己的屬性：geometry和material。

IE11的對HTML5的良好支持，讓開發者可以加入各種豐滿的效果，把整個頁面變得好像活了一樣。同樣IE的硬件加速使得CSS transforms運行的非常高效；另外，IE11中全新的 F12 開發人員工具也幫助我們在開發過程中更方便的進行網站的調試，讓開發者可以清楚的了解到資源以及內存的占用情況以及模擬不同設備的顯示效果。并且微軟推的modern.ie網站也可以讓大家發現網站代碼的問題以及在兼容性方面的一些建議，幫助我們更好的Build整個網站。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈