TML5有一個重要特性：DeviceOrientation，它將底層的方向和運動傳感器進行了高級封裝，它使我們能夠很容易的實現重力感應、指南針等有趣的功能。

前面介紹了html5重力感應的基本原理：

html5重力感應剖析附源碼

本文將結合實例給大家介紹使用HTML5的重力運動和方向傳感器實現手機搖一搖效果。

DeviceOrientation包括兩個事件：

1、deviceOrientation：封裝了方向傳感器數據的事件，可以獲取手機靜止狀態下的方向數據，例如手機所處角度、方位、朝向等。

2、deviceMotion：封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。

HTML

頁面上有一個div#hand，用來放置一個手搖的圖片，div#result用來展示搖動后的結果信息。

1. <div id="hand" class="hand hand-animate"></div>

2. <div id="result"></div>

復制代碼

我們可以使用CSS3來增強頁面效果，使用-webkit-animation動畫效果實現手搖圖片的動態效果，具體請下載源代碼查看。

Javascript

“搖一搖”這個動作即“一定時間內設備了一定距離”，因此通過devicemotion監聽設備晃動獲取到的x, y, z軸的 值在一定時間范圍內的變化率，即判斷設備是否有進行晃動。而為了防止正常移動的誤判，需要給該變化率設置一個合適的臨界值。

HTML5判斷設備晃動的代碼我們使用已經封裝好的shake.js，項目地址：https://github.com/alexgibson/shake.js。

1. <script src="shake.js"></script>

復制代碼

首先實例化Shake，然后啟動開始監聽設備運動情況，監聽設備運動，回調監聽結果：shakeEventDidOccur。

1. window.onload = function() {

2. var myShakeEvent = new Shake({

3. threshold: 15

4. });

6. myShakeEvent.start();

8. window.addEventListener('shake', shakeEventDidOccur, false);

10. function shakeEventDidOccur () {

11. var result = document.getElementById("result");

12. result.className = "result";

13. var arr = ['妹子一枚','福利圖片一套','碼農筆記一本','土豪金一臺'];

14. var num = Math.floor(Math.random()*4);

15. result.innerHTML = "恭喜，搖得"+arr[num]+"！";

16. setTimeout(function(){

17. result.className = "result result-show";

18. }, 1000);

19. }

20. };

這里，函數shakeEventDidOccur()可以自定義，本例是將搖晃后的結果返回在頁面上展示出來，請看DEMO演示。

http://bbs.qietu.com/html/yaoyiyao/

TML5技術已經越來越被我們所接受，特別是一些3D的動畫特效。本文介紹的8個HTML5 3D動畫并沒有特別華麗的界面，但是比較實用，涉及到3D圖片、3D圖表、3D按鈕等方面，一起來看看。

1、HTML5 3D動畫柱形圖表

這次我們要來分享一款效果非常酷的HTML5 3D柱形圖表，這款HTML5圖表和之前分享的都不一樣，主要是外觀上比較吸引人，首先圖表是3D立體的，有一種非常棒的視覺效果；其次，當鼠標劃過柱形圖表時，會有很不錯的HTML5動畫效果。

2、HTML5 3D 粒子波浪動畫特效

今天我們分享一款升級版HTML5 3D粒子波浪動畫特效，我們可以旋轉不同的視角來欣賞粒子波浪的滾動特效。HTML5在動畫制作方面的確讓人眼前一亮。

3、HTML5自定義文字背景生成QQ簽名檔

這是一款利用HTML5實現的自定義文字背景應用，首先我們可以輸入需要顯示的文字，并且為該文字選擇一張背景圖片，背景圖片就像蒙版一樣覆蓋在文字上。點擊生成QQ簽名檔即可將文字背景融為一體生成另外一張圖片，你也可以下載這張擁有你QQ簽名檔的圖片。

4、HTML5坦克大戰游戲簡化版

今天分享的是一款簡化版的HTML5坦克大戰游戲，方向鍵控制坦克的行進方向，空格鍵發射子彈，命中敵方坦克后也會發出聲音，效果還算可以。

5、HTML5 3D陰影文字特效

今天我們要來分享一款非常簡單大氣的HTML5 3D文字特效，這個3D文字特效是通過文字加粗以及文字陰影來實現的，效果非常不錯。同時我們在html5tricks網站上也分享過很多炫酷的文字特效，比如CSS3文字陰影效果 陰影角度可隨鼠標變化、動感的CSS3 Loading文字特效。

6、HTML5 3D衣服擺動特效 超酷HTML5 3D動畫

今天向大家分享一款HTML5 3D衣服擺動動畫特效，動畫也是在HTML5 Canvas上完成，它模擬衣服晾在繩子上，點擊鼠標可以讓衣服擺動起來，就行風吹動它一樣，非常逼真炫酷。

7、HTML5/CSS3一組可愛的3D按鈕

這是一款利用HTML5和CSS3制作而成的按鈕組合，這款CSS按鈕非常具有個性化。該CSS3按鈕不僅具有3D的外觀，點擊按鈕也具有非常立體的效果，更具有特點的是這款CSS3按鈕的形狀是不規則的，而且按鈕中都有一個可愛的小圖標。

8、HTML5 Canvas 3D折線圖表應用

今天我們再來討論一下關于HTML5圖表應用的問題，這款HTML5圖表是基于canvas的3D折線圖表，圖表在初始化的時候會根據數據點把折線分割成多條線段，然后線段將逐漸懸浮到數據點對應數值的位置。由于是3D的效果，所以圖表的折線也和其他折線圖表的不同。

以上就是8個經典的HTML5 3D動畫賞析，希望大家喜歡。