CSS3简单实现，数字滚动效果
2017-10-17 10:25
756 查看
之前项目要做一个数字滚动效果。
因为需要一直滚动且过一段时间就要滚动，网上早的不太满足，而且为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;
}<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_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> </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> </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> </div> <div class="OneNumCon"> <div class="OneListNum"> <div>0</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div& b0ad gt;5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </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_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<digits){
for(var i=0;i<digits-length;i++){
number = "0"+number;
}
}
return number;
}
//数字滚动
//传入具体数值，长度要匹配。
var sei_init_dataStatistics = null;
function init_dataStatistics(dataNum){
var numStr = [];
var dataNumStr = "" + fillZero(dataNum, 10);
console.log(dataNumStr);
//数字字符串数字
for (var i = 0, ln = dataNumStr.length; i < ln; i++) {
var oneDataNumStr = dataNumStr.substring(i, i + 1);
// console.log(oneDataNumStr);
if ('' != oneDataNumStr && null != oneDataNumStr) {
numStr.push(parseInt(oneDataNumStr));
} else {
console.log("数据异常");
// numStr.push(0);
numStr = [0, 0, 0, 0, 0, 0, 0, 0, 0,0];
break;
}
}
$("#allNumCon .OneListNum").eq(0).addClass("rolling_"+numStr[0]);
$("#allNumCon .OneListNum").eq(1).addClass("rolling_"+numStr[1]);
$("#allNumCon .OneListNum").eq(2).addClass("rolling_"+numStr[2]);
$("#allNumCon .OneListNum").eq(3).addClass("rolling_"+numStr[3]);
$("#allNumCon .OneListNum").eq(4).addClass("rolling_"+numStr[4]);
$("#allNumCon .OneListNum").eq(5).addClass("rolling_"+numStr[5]);
$("#allNumCon .OneListNum").eq(6).addClass("rolling_"+numStr[6]);
$("#allNumCon .OneListNum").eq(7).addClass("rolling_"+numStr[7]);
$("#allNumCon .OneListNum").eq(8).addClass("rolling_"+numStr[8]);
$("#allNumCon .OneListNum").eq(9).addClass("rolling_"+numStr[9]);
var setInWid = 80;
clearTimeout(sei_init_dataStatistics);
/*css3执行完各个数字滚动的赋值*/
sei_init_dataStatistics = setTimeout(function(){
$("#allNumCon .OneListNum").eq(0).css("transform","translate3d(0,-"+setInWid*numStr[0]+"px,0)");
$("#allNumCon .OneListNum").eq(1).css("transform","translate3d(0,-"+setInWid*numStr[1]+"px,0)");
$("#allNumCon .OneListNum").eq(2).css("transform","translate3d(0,-"+setInWid*numStr[2]+"px,0)");
$("#allNumCon .OneListNum").eq(3).css("transform","translate3d(0,-"+setInWid*numStr[3]+"px,0)");
$("#allNumCon .OneListNum").eq(4).css("transform","translate3d(0,-"+setInWid*numStr[4]+"px,0)");
$("#allNumCon .OneListNum").eq(5).css("transform","translate3d(0,-"+setInWid*numStr[5]+"px,0)");
$("#allNumCon .OneListNum").eq(6).css("transform","translate3d(0,-"+setInWid*numStr[6]+"px,0)");
$("#allNumCon .OneListNum").eq(7).css("transform","translate3d(0,-"+setInWid*numStr[7]+"px,0)");
$("#allNumCon .OneListNum").eq(8).css("transform","translate3d(0,-"+setInWid*numStr[8]+"px,0)");
$("#allNumCon .OneListNum").eq(9).css("transform","translate3d(0,-"+setInWid*numStr[9]+"px,0)");
},3000);
}截取了我的部分代码，仅供参考。
纵向横向柱状图或者其他的效果，也可以这样写。
css3代码太长不粘贴了。
大概思路就是，0至100的动画animation和100个class类，时间速度曲线自己控制。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个简单的滚动数字的效果实现
- JavaScript一点也不简单—实现“鼠标控制局部文字滚动效果”初探
- PHP实现简单数字分页效果
- 纯CSS3实现滚动的齿轮动画效果
- 仿网易聚合新闻 - 超简单实现 - 刷新按钮CSS3旋转效果
- Html5的CSS3的transition实现简单动画效果
- CSS3实现图片滚动播放效果
- 两种思路用javascript实现实现简单的数字滚动动画
- iOS cocos2d 实现RollNumber(数字滚动效果)控件效果源码
- 简单实现js间歇或无缝滚动效果
- fullPage.js和CSS3实现全屏滚动效果
- JavaScript-html标题滚动效果的简单实现
- jquery实现图片滚动效果的简单实例
- JQuery实现数字滚动增加的效果
- 超简单CSS3实现圆角、阴影、透明效果
- 两种思路用javascript实现实现简单的数字滚动动画
- JS+CSS实现滚动数字时钟效果
- css3简单实现火焰效果
- JQuery实现数字滚动增加的效果
- css3简单实现页面中出现雪花飘落效果