JS+CSS实现数字滚动

Galence 发布于2019-08-29 12:18 / 3367人阅读

摘要：最近在实现一个显示颜色数值的动画效果时，尝试使用了书写模式及来实现文字的竖直方向的排列，并借助的过渡来实现动画效果。书写模式控制行内字符的旋转此时，效果如图然后我们将外层容器设置为，再添加一点即可实现数字的滚动效果。

最近在实现一个显示RGB颜色数值的动画效果时，尝试使用了writing-mode(书写模式)及 text-orientation来实现文字的竖直方向的排列，并借助CSS的transition(过渡)来实现动画效果。关于书写模式，参考链接[链接描述]1

各浏览器对writing-mode的支持情况，可在Can I use中查看，而对text-orientation的支持情况在Can I use中暂不能查到，根据笔者的测试，Chrome/FF/Opera均支持此样式，而IE/Edge都不支持。暂未在Safari中测试，欢迎各位补充。

首先，创建数字的容器。因为RGB颜色的范围是0~255，因此百位数字仅需1、2两个数字。

接下来添加其CSS样式，我们需要将文字的书写方向改为从上至下，且字符方向是竖直的。使用wrting-mode样式可以改变文字的书写方向，使用text-orientation可以实现行内字符的旋转。

    .num_span span {
        float: right;
        /* 书写模式 */
        writing-mode: vertical-rl;
        /* 控制行内字符的旋转 */
        text-orientation: upright;
    }

此时，效果如图

然后我们将外层容器设置为over-flow:hidden，再添加一点JS即可实现数字的滚动效果。主要思路为，通过js分别得到数字个位、十位、百位上的数字，并改变对应的margin—top即可。需要注意的是，在数字小于10时，需额外处理一下十位数字的margin-top值，使十位上的数字隐藏。完整的代码如下。




    
    RollingNumber
    


    
    

        0123456789
        0123456789
        12

云服务器 GPU云服务器循环滚动css js js数字滚动抽奖 js数字滚动效果 JS轻松实现CSS设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111807.html

JS+CSS实现数字滚动

摘要：最近在实现一个显示颜色数值的动画效果时，尝试使用了书写模式及来实现文字的竖直方向的排列，并借助的过渡来实现动画效果。书写模式控制行内字符的旋转此时，效果如图然后我们将外层容器设置为，再添加一点即可实现数字的滚动效果。最近在实现一个显示RGB颜色数值的动画效果时，尝试使用了writing-mode(书写模式)及 text-orientation来实现文字的竖直方向的排列，并借助CSS的...

_DangJin 2019-08-20 15:25 评论0 收藏0
数字滚动插件numberAnimate.js的使用及效果修改

摘要：有个实现数字滚动的需求，想着肯定有很多这种效果的插件，就不自己造轮子了，于是，找了个数字滚动插件，还挺好用，很简单，刚好符合需求。另外，提示一句，改变数字的字号大小，需要修改的中的字号的比例要把握好，一不小心就坏了，呵呵，亲身体会有个实现数字滚动的需求，想着肯定有很多这种效果的插件，就不自己造轮子了，于是，找了个numberAnimate js数字滚动插件，还挺好用，很简单，刚好符合...

fuyi501 2019-08-23 11:49 评论0 收藏0
前端实用知识

摘要：开发中的实践尽量使用更换实现样式变化。原因事件存在毫秒延时。解决方法移动端使用事件。文本显示省略号显示省略号的基本条件元素定长。单行显示省略号多行显示省略号目前只有内核支持此属性和手机端内核以及浏览器默认字体浏览器默认字体是。 1、输入URL到显示网页，中间发生了什么 DNS(完成域名到IP的映射)-->TCP传输(三次握手建立传输链接)-->发送请求(分析url，设置请求头、主体)-...

luckyw 2019-08-30 15:55 评论0 收藏0