更多文章可关注我的个人博客：https://seven777777.github.io/myblog/

本文主要回顾整理一下之前（大概一年前，😂，这一年实在比较忙 ）写的一个页面动画。

之前其实写了两种方案，最终使用的如下的方案：

不过本篇文章会将两种方案都整理出来，方便日后有同样的需求时可以快速复用，同时也可以给正在实现这个需求的同学们一些参考！

话不多说，开整！

这一种的呈现方式也是我在项目中最终应用的方式，个人觉得更好看一点 😄

其实想要实现这种滚动式数值变化原理非常简单，就是利用元素的位移，通常如果用css来实现元素的位移动画的话，我们很容易就会想到animation属性。那我们基本上思路就有了：

大体思路如上，但实际操作过程中，还会有很多细节需要考虑到，比如小数点的显示，是否显示千分位符号，数字累计增长计算细节等，接下来就具体来看看如何实现。

首先，我们html部分只需要一个box来承载显示结果即可，细节部分我们下面通过JS来添加

这里的 id 用于js中的标识，而 class 则用于样式的编辑。我们这里命名一个id：valScrollAmt，下面会使用到。

接下来，我们假设初始值为 0，首先将其转换成数组。

说明：文中的代码主要是方便分解步骤讲解的写法，实际应用中，为了代码优雅性，可进行封装。不想看分解的同学也可以直接 戳这里 看完整示例代码 戳这里 也可以去到我的github查看源码 戳这里 直接看效果页面