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

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

思路

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

初步实现

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

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

html 结构

关键 css

.box-item {

position: relative;

display: inline-block;

width: 54px;

height: 82px;

/* 背景图片 */

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

background-size: 100%