JS+CSS实现数字滚动
时间：2023-03-31 00:40:10
CSS
最近在实现一个显示RGB色值的动画效果时，尝试使用writing-mode（书写模式）和text-orientation实现文字竖排，借助CSStransition（过渡）实现动画效果。关于书写模式，参考链接【链接说明】1.各个浏览器对writing-mode的支持可以在CanIuse中查看，但是暂时在CanIuse中查不到对text-orientation的支持.据笔者测试，Chrome/FF/Opera支持这种风格，IE/Edge不支持。尚未在Safari中测试，欢迎补充。首先，为数字创建容器。因为RGB颜色的范围是0~255，所以百位只需要1和2。0123456789012345678912
接下来，添加它的CSS样式，我们需要改变文字的书写方向，从上到下，字符方向为竖向。使用writing-modestyle改变文字的书写方向，使用text-orientation实现行中字符的旋转。.nu??m_spanspan{浮动：对；/*书写模式*/writing-mode:vertical-rl;/*控制行中字符的旋转*/text-orientation:upright;设置成over-flow:hidden，加一点JS实现数字滚动效果。主要思路是通过js分别获取个位、十位、百位的数字，并改变相应的margin-top。需要注意的是，当号码小于10时，需要额外处理十位号码的margin-top值，以隐藏十位号码以上的号码。完整代码如下。
RollingNumber0123456789012345678912 