css文字跳动

45 阅读1分钟
<div class="jump-texts">
                <span style="--i:1"></span>
                <span style="--i:2"></span>
                <span style="--i:3"></span>
                <span style="--i:4"></span>
                <span style="--i:5"></span>
                <span style="--i:6">.</span>
                <span style="--i:7">.</span>
                <span style="--i:8">.</span>
</div>
@keyframes jump {
  0%,100% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(-24px);
  }

}
.jump-texts {
  font-size: 36px;
  font-weight: bold;
}

.jump-texts span {
  display: inline-block;
  animation: jump 1.5s ease-in-out infinite;
  animation-delay: calc(.1s*var(--i));

}