CSS动画-数字轮盘滚动效果实现（组件封装，快速使用）

效果图：

原理分析：
这玩意就和垂直方向的轮播图差不多，只是把轮播的图换成数字

 

主要实现：
父组件：父组件接收一个curNum属性，这个属性代表当前需要显示的数字。它将这个数字传递给子组件AnimateNum，以便子组件可以正确地显示和滚动数字。
子组件一 (AnimateNum)：这个组件接收父组件传递的curNum，并将其拆分为单个数字，然后为每个数字创建一个AnimateNumItem实例。每个实例都有其自己的延迟时间，以便它们可以依次停止滚动，从而创建一个动态的滚动效果。
子组件二 (AnimateNumItem)：这个组件负责实现单个数字的滚动动画。它接收num、delay和size三个属性。num属性决定了数字的位置，delay属性决定了动画的延迟时间，size属性用于设置数字的大小。组件内部使用了CSS动画来实现数字的滚动效果。