大屏数字滚动翻转效果来源于最近工作中元素后台管理页面一张大屏的界面图,该界面图上有一个模块需要有数字往上翻动的效果,以下是最终实现的效果:
在实现此效果之前,我们先来捋一下思路,用思维导图来设计一下我们的实现步骤,如下:
你可以审查元素,下载数字背景图片,复制图片地址,或者使用其他背景图片,背景颜色
有了以上的设计流程,我们先来简单实现一下:
//CSS代码
& lt; style>
.box-item {
位置:相对;
显示:inline-block;
宽度:54 px;
身高:82 px;/*背景图片*/背景:url (/number-bg.png)没有重演中心中心;
background-size: 100% - 100%;
字体大小:62 px;
行高:82 px;
text-align:中心;
}
& lt;/style>//htm代码
& lt; div类="盒子"比;
& lt; p class="框条目”比;
& lt; span> 1 & lt;/span>
& lt;/p>
& lt;/div>
实现以上代码后,它的效果将是下面这样的:
背景框中有了数字以后,我们现在来思考一下,背景框中的文字,一定是<代码> 0 - 9> html 结构的前提下,如何让数字滚动起来呢?这个时候我们的魔爪就伸向了一个CSS <代码> 属性:<代码>写入方式>
<李> horizontal-tb:默认值,表示水平排版,从上到下。
<李> vertical-lr:表示垂直排版,从左到右。
<李> vertical-rl:表示垂直排版,从右到左。
它的实时效果是像下面这样:
根据以上的灵感,我们可以实现下面这样的效果:
代码如下:
//html部分
& lt; p class="框条目”比;
& lt; span> 0123456789 & lt;/span>
& lt;/p>//风格部分
.box-item {
显示:inline-block;
宽度:54 px;
身高:82 px;
背景:url (/number-bg.png)没有重演中心中心;
background-size: 100% - 100%;
字体大小:62 px;
行高:82 px;
text-align:中心;
位置:相对;
写入方式:vertical-lr;
文本方向:直立;/*溢出:隐藏;*/}
.box-item跨度{
位置:绝对的;
上图:10 px;
左:50%;
变换:translateX (-50%);
字母间距:10 px;
}
如果我们想让数字滚动到<代码> 5>
答案是:向下滚动<代码>
-50%
那么其他的数字呢?
得益于我们特殊的实现方法,每一位数字的滚动距离有一个通用的公式:
变换:“翻译(-50%,${数量* 10}%)
有了以上公式,我们让数字滚动到<代码> 5>
代码加上的变换:翻译(-50%,${数量* 10}%)”,示例如下
.box-item跨度{
位置:绝对的;
上图:10 px;
左:50%;
变换:翻译(-50%,-50%);
字母间距:10 px;
}
在知道了每一个数字具体的滚动距离后,我们来设计一下,让数字能够随机滚动起来:
一下是让数字随机滚动的JS
setInterval()=比;{
让数量=. getelementbyid(数量)
我们随机=getRandomNumber (0, 10)
number.style。变换='翻译(-50%,${随机* 10}%)”
},2000)
函数getRandomNumber(最小,最大){
返回Math.floor (math . random() *(最大值-最小值+ 1)+分钟)
}
