html数字自动滚动代码怎么写,你可能需要这样的大屏数字滚动效果

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

思路

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

初步实现

你可以审查元素，下载数字背景图片

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

html 结构

1

关键 css

.box-item {

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;

}

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

思考：背景框中有了数字以后，我们现在来思考一下，背景框中的文字，一定是 0-9 之前的数字