文字切换效果

<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;
  width: 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;
  }
}


posted @ 2020-03-11 16:59  cmwang2017  阅读(156)  评论(0)  编辑  收藏  举报