<body>
<div class="dropping-texts">
<div class="data-box ">
<p class="count">123</p>
<p class="text">自动化接警</p>
</div>
<div class="data-box ">
<p class="count">234</p>
<p class="text">人工接警</p>
</div>
</div>
</div>
</body>
body {
margin:0px;
text-align:center;
padding-top:43vh;
color:#fff;
font-family:'Microsoft YaHei',sans-serif;
font-size:36px;
font-weight:100;
overflow:hidden;
background: #0094ff;
/* animation:bg 5s linear infinite; */
}
p {
margin: 0;
padding: 0;
}
.dropping-texts {
display: inline-block;
180px;
text-align: left;
height: 38px;
}
.dropping-texts > div {
position:absolute;
font-size:0px;
opacity:0;
}
.dropping-texts > div:nth-child(1) {
animation: roll 5s linear infinite 0s;
}
.dropping-texts > div:nth-child(2) {
animation: roll 5s linear infinite 2.6s;
}
@keyframes roll {
0% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
}
3% {
opacity:1;
}
5% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
}
45% {
font-size:inherit;
opacity:1;
margin-left:0px;
margin-top:0px;
}
50% {
font-size:0px;
opacity:0.5;
margin-left:20px;
margin-top:100px;
}
100% {
font-size:0px;
opacity:0;
margin-left:-30px;
margin-top:0px;
}
}