手機端的交互體驗越來越重要，因爲好的體驗能吸引用戶的使用，提高用戶的愉悅感；本文主要實現三個交互體驗：
體驗動效類似防護軟件的數據校驗，使校驗數據的過程更生動，而不單調；
數據滾動條動效是打開頁面的時候，對數據顯示百分比做了一個滾動條動效；
加載動效有別於平時的加載動效，使加載過程更加生趣。
體檢動效
html代碼這一塊，都是一些簡單排版，詳細代碼可自行查看下圖。
本文的實例都是由css代碼實現，所以這一塊是本文的重點，實現過程的詳細步驟如下（主要分析跟動態效果有關的代碼）：
1.新建@keyframes規則（round），用於外框旋轉（0%表示開始、50%表示中間、100%表示最後，可根據實際情況修改旋轉角度和修改百分比）；
2.默認狀態下：
外框（i）設置了透明度（opacity）爲0（不顯示），且左右兩邊的邊框顏色（border-left、border-right）不一樣，使旋轉的效果更炫；
分別對三個外框設置了動畫animation（引用round），爲了讓校驗比較逼真，設置第一個外框勻速旋轉2s，第二個延遲2s後勻速旋轉2s，第三個延遲4s勻速旋轉2s。
3.打開網頁後：
根據設置的動畫，會先旋轉第一個外框，2s後旋轉完消失，接着旋轉第二個，2s後旋轉完消失，最後旋轉第三個外框2s後消失。
數據滾動條動效
html代碼和css樣式如下圖，這一塊比較簡單，也不是本文重點，代碼可自行查看下圖。
數據滾動條動效是利用animate()方法中逐漸改變的功能來實現，詳細代碼如下圖：
該動效是有一個滾動條慢慢增加的過程，所以對寬度（width）設置逐漸改變；
爲了使過程更協調，設置了動畫時間1s（1000）。
加載動效
html代碼這一塊，都是一些簡單排版，詳細代碼可自行查看下圖。
本文的實例都是由css代碼實現，所以這一塊是本文的重點，實現過程的詳細步驟如下（主要分析跟動態效果有關的代碼）：
1.新建@keyframes規則（load），用於豎線Y軸縮放（0%、40%、100%縮小到0.2倍，20%還原到原大小，可根據實際情況修改縮放比例和修改百分比，改造屬於自己的加載動效）；
2.默認狀態下：
豎線（i）縮小到0.2倍（scaleY(0.2)），且設置了動畫animation（引用load），執行1.5s並無限循環；
分別對後四個設置延遲時間，爲了讓加載更有層次感，延遲時間分別爲0.1s、0.2s、0.3和0.4。
3.打開網頁後：
根據設置的動畫，會從左到右，一根根豎線慢慢放大縮小，一直循環。
注意事項
該例子使用了單位vw，自適應於各種分辨率的手機端。