<div class="data-box rescue1">
<p class="count">{{dataObj.firstRescure}}</p>
<p class="text">一级救援</p>
</div>
<div class="data-box rescue2">
<p class="count">{{dataObj.secondRescure}}</p>
<p class="text">二级救援</p>
</div>
<div class="data-box rescue3">
<p class="count">{{dataObj.thirdRescure}}</p>
<p class="text">三级救援</p>
</div>
.rescue1 {
/* animation: rescue1Anmi 8s linear infinite; */
}
.rescue2 {
top: 100px;
/* animation: rescue2Anmi 8s 1s linear infinite; */
}
.rescue3 {
top: 200px;
/* animation: rescue3Anmi 8s 2s linear infinite; */
}
/* 救援动画 */
@keyframes rescue1Anmi{
0% { top: 0;opacity: 1}
20% { top: -70px;opacity: 1}
40% { top: -140px ;opacity: 0}
60% { top: -210px ;opacity: 0}
80% { top: 70px;opacity: 0}
100%{ top: 0;opacity: 1}
}
@keyframes rescue2Anmi{
0% { top: 70px;opacity: 1}
20% { top: 0;opacity: 1}
40% { top: -70px ;opacity: 1}
60% { top: -140px ;opacity: 0}
80% { top: 140px;opacity: 0}
100%{ top: 70px;opacity: 1}
}
@keyframes rescue3Anmi{
0% { top: 140px;opacity: 0}
20% { top: 70px;opacity: 1}
40% { top: 0 ;opacity: 1}
60% { top: -70px ;opacity: 1}
65% { top: -90px ;opacity: 0}
80% { top: 210px;opacity: 0}
100%{ top: 140px;opacity: 0}
}