html中数字效果,使用css实现电子数字效果

在生活中我们看到电子表的显示方式

现在我们就实现这样的效果，核心就是每个数字构建后再合并，话不多说上代码

html结构

css结构

/* The Digits */

.light{

200px;

background: #f4f5f7;

height: 60px;

text-align: center;

}

.digits div{

text-align:left;

position:relative;

28px;

height:50px;

display:inline-block;

margin:0 4px;

}

.light .digits div span {

background-color: #272e38;

border-color: #272e38;

}

.digits div span{

opacity:0;

position:absolute;

-webkit-transition:0.25s;

-moz-transition:0.25s;

transition:0.25s;

}

.digits div span:before,

.