css数字⽂字滚动效果效果：
原理
利⽤伪类，开始的时候给本来的内容盖住，然后执⾏动画。
设置宽⾼，宽就是单个内容（⽐如数字中的⼀位数）的宽，让内容⼀⾏⼀个的排成列。
动画就是让这些内容⼀个个的往上升，造成⼀种滚动效果毫秒英文
最后露出原来的内容（原来的内容和伪类⾥的内容是同样的样式）
代码
<!DOCTYPE html>
<html>
<head>
<meta chart="utf-8">
<title>数字滚动</title>
<style>
/*⽆关紧要的属性*/
.txt{
position: absolute;
left: 178px;
font-size: 30px;
line-height: 30px;
}
/*接下来这⼀段是重点*/
/
*设置内容和伪类的样式*/
.mod_txt{
position: relative;
display: inline-block;
vertical-align: middle;女生竞选部长演讲稿
text-align: center;
float: left;
overflow: hidden;
width: 22px;
height: 30px;
text-transform: upperca;
font-size: 30px;
color: #333;
}
.mod_txt:before{
position: absolute;
top: 0;
left: 0;
width: 100%;
word-break: break-all;
background: #FFFFFF;
font-size: 30px;
color: #333;常用日语口语
}
/*设置⾥⾯第⼀个数字的动画*/happiness是什么意思英语
.txt11 span:nth-child(1):before{
content:"03456789";
-webkit-animation-name: txt1;
animation-name: txt1;
-webkit-animation-duration: 1.6s;
animation-duration: 1.6s;
/* -webkit-animation-delay: 0.3s;
animation-delay: 0.3s; */
-
webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/*随便写的数，作⽤就是让这⼀列数字向上升，形成滚动效果*/
@-webkit-keyframes txt1{
from{
margin-top: -648px;
}
to{
margin-top: 110px;
costume
}
}
/*设置⾥⾯第⼆个数字的动画*/
.txt11 span:nth-child(2):before{
content:"051341989";
-webkit-animation-name: txt1;
animation-name: txt1;
rearm
-webkit-animation-duration: 1.8s;
animation-duration: 1.8s;pas>thorne
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}nbtv
</style>forever意思
</head>
<body>
<div class="txt txt11">
<span class="mod_txt">2</span>
<span class="mod_txt">0</span>
</div>
</body>
</html>
唠唠叨叨
想让动画停留的时间不⼀样，就要让animation-duration不⼀样
想让动画开始运动的时间不同，就单加animation-delay，但这样会让原来的数字先被看到⼀会
想先不让动画执⾏，到⼀定时间了再执⾏的话，以上⾯的demo为例，html⾥可以先不写class名txt11，等到了时候再$('.txt').addClass('txt11')；就好了
