css实现数字动态切换效果

html

<span class="flip-number" data-num="2"></span>
<span class="flip-number" data-num="3"></span>
<span class="flip-number" data-num="4"></span>
<span class="flip-number" data-num="5"></span>
<span class="flip-number" data-num="6"></span>

css

/* 撑开高度 */
.flip-number::before {
  content: 'a';
  display: block;
  color: transparent;
}

/* 数字 */
.flip-number::after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: '0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A' attr(data-num);
  display: block;
  white-space: pre-line;
  text-align: center;
  animation: flipNumber cubic-bezier(.12,.78,.52,1.2)  1 .4s;
  animation-fill-mode: forwards;
  will-change: transform;
}

@keyframes flipNumber {
  from {transform: translateY(0%);}
  to {transform: translateY(-1000%);}
}

.flip-number:nth-last-of-type(n + 1)::after { animation-delay: .4s;}
.flip-number:nth-last-of-type(n + 2)::after { animation-delay: .8s;}
.flip-number:nth-last-of-type(n + 3)::after { animation-delay: 1.2s;}
.flip-number:nth-last-of-type(n + 4)::after { animation-delay: 1.6s;}
.flip-number:nth-last-of-type(n + 5)::after { animation-delay: 2.0s;}
.flip-number:nth-last-of-type(n + 6)::after { animation-delay: 2.4s;}
.flip-number:nth-last-of-type(n + 7)::after { animation-delay: 2.8s;}
.flip-number:nth-last-of-type(n + 8)::after { animation-delay: 3.2s;}
.flip-number:nth-last-of-type(n + 9)::after { animation-delay: 3.6s;}
.flip-number:nth-last-of-type(n + 10)::after { animation-delay: 4.0s;}
.flip-number:nth-last-of-type(n + 11)::after { animation-delay: 4.4s;}
.flip-number:nth-last-of-type(n + 12)::after { animation-delay: 4.8s;}

.flip-number {
  position:relative;
  overflow: hidden;
  display: inline-block;
}

/* custom styles */
.flip-number {
  font-size: 60px;
  background: #f88;
  text-align: center;
  width: 40px;
}

\A作用是换行