CSS3简单实现，数字滚动效果
之前项目要做一个数字滚动效果。
因为需要一直滚动且过一段时间就要滚动，网上早的不太满足，而且为0也滚动，用css+jq写了一下。
/*数字滚动效果*/
/*需要浏览器后缀的自己添加*/
css动画速度时间函数，可自己定义。
截取了我的部分代码，仅供参考。
纵向横向柱状图或者其他的效果，也可以这样写。
css3代码太长不粘贴了。
大概思路就是，0至100的动画animation和100个class类，时间速度曲线自己控制。
因为需要一直滚动且过一段时间就要滚动，网上早的不太满足，而且为0也滚动，用css+jq写了一下。
首先每一个数字拆成单个数字。
我这边9个数字，根据自己需要添加。/*数字滚动效果*/
.allNumCon {
/*display: block;*/
display: -webkit-flex;
display: flex;
margin-top: 16px;
margin-left: 10px;
}
.OneNumCon,
.OneNumCon_dou{
font-family: DIN-Medium;/*字体自己选择*/
display: inline-block;
width: 55px;
height: 80px;
overflow: hidden;
font-size: 80px;
line-height: 80px;
text-align: center;
margin-right: 8px;
/*background: url(../img/Income_bg.png);*/
background: url(../img/Income_bg.png) center center no-repeat;/*每个数字的背景图片*/
/*background-position: 0px 10px;*/
}
.OneNumCon_dou span {
display: inline-block;
margin-top: -10px;
}
.OneListNum {
transform: translate3d(0,0,0)
}
.OneListNum div{
height: 80px;
}
0
1
2
3
4
5
6
7
8
9
,
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
,
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
,
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
每个数字加个css3动画滚动。
/*需要浏览器后缀的自己添加*/
.rolling_0 {
animation: rolling_0 2.1s ease;
-webkit-animation: rolling_0 2.1s ease;
}
.rolling_1 {
animation: rolling_1 3s ease;
-webkit-animation: rolling_1 3s ease;
}
.rolling_2 {
animation: rolling_2 3s ease;
-webkit-animation: rolling_2 3s ease;
}
.rolling_3 {
animation: rolling_3 3s ease;
-webkit-animation: rolling_3 3s ease;
}
.rolling_4 {
animation: rolling_4 3s ease;
-webkit-animation: rolling_4 3s ease;
}
.rolling_5 {
animation: rolling_5 3s ease;
-webkit-animation: rolling_5 3s ease;
}
.rolling_6 {
animation: rolling_6 3s ease;
-webkit-animation: rolling_6 3s ease;
}
.rolling_7 {
animation: rolling_7 3s ease;
-webkit-animation: rolling_7 3s ease;
}
.rolling_8 {
animation: rolling_8 3s ease;
-webkit-animation: rolling_8 3s ease;
}
.rolling_9 {
animation: rolling_9 3s ease;
-webkit-animation: rolling_9 3s ease;
}
.rolling_10 {
animation: rolling_10 1s ease;
-webkit-animation: rolling_10 1s ease;
}
/*-webkit-*/
@-webkit-keyframes rolling_0 {
from {
transform:translate3d(0,-720px,0);
}
to {
transform:translate3d(0,0px,0);
}
}
@-webkit-keyframes rolling_1 {
from {
transform:translate3d(0,0px,0);
}
to {
transform:translate3d(0,-80px,0);
}
}
@-webkit-keyframes rolling_2 {
from {
transform:translate3d(0,0,0);
}
to {
transform:translate3d(0,-160px,0);
}
}
@-webkit-keyframes rolling_3 {
from {
transform:translate3d(0,0,0);
}
to {
transform:translate3d(0,-240px,0);
}
}
@-webkit-keyframes rolling_4 {
from {
transform:translate3d(0,0,0);
}
to {
transform:translate3d(0,-320px,0);
}
}
@-webkit-keyframes rolling_5 {
from {
transform:translate3d(0,0,0);
}
to {
transform:translate3d(0,-400px,0);
}
}
@-webkit-keyframes rolling_6 {
from {
transform:translate3d(0,0,0);
}
to {
transform:translate3d(0,-480px,0);
}
}
@-webkit-keyframes rolling_7 {
from {
transform:translate3d(0,0,0);
}
to {
transform:translate3d(0,-560px,0);
}
}
@-webkit-keyframes rolling_8 {
from {
-webkit-transform:translate3d(0,0,0);
}
to {
-webkit-transform:translate3d(0,-640px,0);
}
}
@-webkit-keyframes rolling_9 {
from {
transform:translate3d(0,0,0);
}
to {
transform:translate3d(0,-720px,0);
}
}css动画速度时间函数，可自己定义。
然后jq或者js中添加删除class。
/*不满足位数补齐0，数字位数前面补零*/ function fillZero(number, digits){
number = String(number);
var length = number.length;
if(number.length截取了我的部分代码，仅供参考。
纵向横向柱状图或者其他的效果，也可以这样写。
css3代码太长不粘贴了。
大概思路就是，0至100的动画animation和100个class类，时间速度曲线自己控制。