--- theme: fancy --- 下周就要开始大屏的开发工作了，内容包含大块的数字展示区域，且数字在更新需要滚动效果。借此花点时间封装一下单个数字滚动组件 ![动画.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/608cb5965bd4447497a5218fc701f63f~tplv-k3u1fbpfcp-watermark.image?) 搭建基本结构 ```

0123456789

.box { height: 82px; width: 54px; line-height: 82px; text-align: center; background-color: #149373; border-radius: 10px; margin-right: 5px; } .num { font-size: 62px; } ``` 此时，出来的效果为 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fdf195cbe07a490d804b9ccb02ede162~tplv-k3u1fbpfcp-watermark.image?) 若是想要滚动效果的话，就需要将数字变成竖向排布，这样才能加上下移动效果。这时需要加两个css属性 ``` writing-mode: vertical-lr; text-orientation: upright; ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d8ae82b51c848c08727aace3434f0c0~tplv-k3u1fbpfcp-watermark.image?) 此时已经有点接近目标了，而后需要做的就是要改变字符串的位置，让相应的数字出现在框中。改变位置我们可以让span变成绝对定位，然后通过transform来操作 ``` .box { height: 82px; width: 54px; line-height: 82px; text-align: center; background-color: #149373; border-radius: 10px; margin-right: 5px; position: relative; writing-mode: vertical-lr; text-orientation: upright; } .num { position: absolute; left: 50%; top: 10px; font-size: 62px; transform: translate(-50%, 0); } ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08609c117e9c4ee0b6f11c8577502c87~tplv-k3u1fbpfcp-watermark.image?) 此时设置translate(-50%, 0)时，正好0在框中，若设置translate(-50%, -50%)时，应该是5在框中 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4476d078afa349b2a9f5e2a502c87b5b~tplv-k3u1fbpfcp-watermark.image?) 后续只需要我们改变transform中translate设置，就可以实现框中出现不同的数字，我们要封装成通用的组件，就是接收外部传入的数字，然后设置translate来达到通用的效果，此时我们可以将transform放置在我们的style中。再增加一个动画，transition: all 0.5s; ``` ``` ![动画.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3b771fc6f0d4e53844c497c981de560~tplv-k3u1fbpfcp-watermark.image?) 这时候差不多达成了文字滚动的效果了，此时只需要在box类下增加一个overflow: hidden，将超出部分隐藏那么数字滚动效果就达成了。效果就如同 ![动画2.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a869c983ec404d859edb61126ab210de~tplv-k3u1fbpfcp-watermark.image?) 这就是简单的一个封装，以下是完整代码。借此做简单的做一个记录，也希望大家可以来探讨分享一下其它的实现方案。 ``` ```