CSS3简单实现，数字滚动效果
之前项⽬要做⼀个数字滚动效果。
因为需要⼀直滚动且过⼀段时间就要滚动，⽹上早的不太满⾜，⽽且为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;
}
<div class="allNumCon" id="allNumCon">
<div class="OneNumCon">
<div class="OneListNum">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
<div class="OneNumCon">
<div class="OneListNum">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
<div class="OneNumCon">
<div class="OneListNum">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
<div class="OneNumCon">
<div class="OneListNum">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
<div class="OneNumCon_dou">    <span>,</span>
</div>
<div class="OneNumCon">
<div class="OneListNum">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
<div class="OneNumCon">
<div class="OneListNum">
<div>0</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
<div class="OneNumCon">
<div class="OneListNum">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
<div class="OneNumCon_dou">    <span>,</span>
</div>
<div class="OneNumCon">
<div class="OneListNum">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
<div class="OneNumCon">
<div class="OneListNum">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>js控制css3动画触发
</div>
<div class="OneNumCon">
<div class="OneListNum">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
每个数字加个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_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);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。