html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果（通俗易懂附完整代码）...

原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码)

大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果，以下是最终实现的效果：

整体思路：

在实现此效果之前，我们先来捋一下思路，用思维导图来设计一下我们的实现步骤，如下：

你可以审查元素，下载数字背景图片，复制图片地址，或者使用其他背景图片、背景颜色

有了以上的设计流程，我们先来简单实现一下：

//CSS代码

position: relative;

display: inline-block;

width: 54px;

height: 82px;/*背景图片*/background: url(./number-bg.png) no-repeat center center;

background-size: 100% 100%;

font-size: 62px;

line-height: 82px;

text-align: center;

}

//htm代码

1

实现以上代码后，它的效果将是下面这样的：

思考：背景框中有了数字以后，我们现在来思考一下，背景框中的文字，一定是 0-9 之前的数字，要在不打乱以上 html 结构的前提下，如何让数字滚动起来呢？这个时候我们的魔爪就伸向了一个 CSS 属性： writing-mode ，下面是它属性的介绍：

horizontal-tb：默认值，表示水平排版，从上到下。

vertical-lr：表示垂直排版，从左到右。

vertical-rl：表示垂直排版，从右到左。

它的实时效果是像下面这样：

根据以上的灵感，我们可以实现下面这样的效果：

代码如下：

//html部分

0123456789

//style部分

.box-item {

display: inline-block;

width: 54px;

height: 82px;

background: url(./number-bg.png) no-repeat center center;

background-size: 100% 100%;

font-size: 62px;

line-height: 82px;

text-align: center;position: relative;

writing-mode: vertical-lr;

text-orientation: upright;/*overflow: hidden;*/}.box-item span {

position: absolute;

top: 10px;

left:50%;

transform: translateX(-50%);