实现体检动效、数据滚动条动效和加载动效

我不是女神ヾ 2022-02-22 14:22 392阅读 0赞

手机端的交互体验越来越重要，因为好的体验能吸引用户的使用，提高用户的愉悦感；本文主要实现三个交互体验：

体验动效类似防护软件的数据校验，使校验数据的过程更生动，而不单调；

数据滚动条动效是打开页面的时候，对数据显示百分比做了一个滚动条动效；

加载动效有别于平时的加载动效，使加载过程更加生趣。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70][]

### 体检动效 ###

html代码这一块，都是一些简单排版，详细代码可自行查看下图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1][]

本文的实例都是由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后消失。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5][]

### 数据滚动条动效 ###

html代码和css样式如下图，这一块比较简单，也不是本文重点，代码可自行查看下图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 7][]

数据滚动条动效是利用animate()方法中逐渐改变的功能来实现，详细代码如下图：

该动效是有一个滚动条慢慢增加的过程，所以对宽度（width）设置逐渐改变；

为了使过程更协调，设置了动画时间1s（1000）。

![20190409144708112.jpg][]

### 加载动效 ###

html代码这一块，都是一些简单排版，详细代码可自行查看下图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 8][]

本文的实例都是由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.打开网页后：

根据设置的动画，会从左到右，一根根竖线慢慢放大缩小，一直循环。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 9][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 10][]

### 注意事项 ###

该例子使用了单位vw，自适应于各种分辨率的手机端。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70]: /images/20220222/0360bfc5663a43658158c19a67e0b33f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 1]: /images/20220222/df966908def44f688b3a3244e587333f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 2]: /images/20220222/415effcb749940828b2fe0d7d0f3a9fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 3]: /images/20220222/14bd80cdbe2a448784a2b61899da51ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 4]: /images/20220222/01ba282cf66a40acba4e331310b516e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 5]: /images/20220222/a724b2e0120e4d9fbab9c1708e537722.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 6]: /images/20220222/6105b804d00a4d2981f7eda989a1d667.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 7]: /images/20220222/e9ccc2a7bb8d4eb0948ee652a1568f09.png
[20190409144708112.jpg]: /images/20220222/77ce72e5a9994f0fabdea08fafb63489.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 8]: /images/20220222/a258e4704fce4e8a98a86112d0f89514.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 9]: /images/20220222/d78d4c070d55424aade1178e61bb0057.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbmcwOTY0_size_16_color_FFFFFF_t_70 10]: /images/20220222/0a7d0d8c9a62406d881d3b2338afc7b5.png