手机端的交互体验越来越重要，因为好的体验能吸引用户的使用，提高用户的愉悦感；本文主要实现三个交互体验：
体验动效类似防护软件的数据校验，使校验数据的过程更生动，而不单调；
数据滚动条动效是打开页面的时候，对数据显示百分比做了一个滚动条动效；
加载动效有别于平时的加载动效，使加载过程更加生趣。
体检动效
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，自适应于各种分辨率的手机端。
