CSS3简单实现,数字滚动效果
2017-10-17 10:25
806 查看
之前项目要做一个数字滚动效果。
因为需要一直滚动且过一段时间就要滚动,网上早的不太满足,而且为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简单实现页面中出现雪花飘落效果