我试图在一个css的弹性文本框显示动画文本。它应该显示"30，538 +"的第一行和"腿断"的第二行（虚拟文本）。两者都应该堆叠在页面的中心（我有其他文本上面和下面）。数字是动画悬停与CSS。

.legg-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-direction: row-reverse;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
}

.legg-desc {
  color: #ae95da;
  padding-top: 50px;
  align-items: center;
}

/* number animation */

.legg body {
  background: #fff;
  margin: 0;
  padding: 0;
}

.legg ul {
  padding: 10px;
  margin: 0;
  display: flex;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin-top: 225px;
}

.legg ul li {
  list-style: none;
  color: #ae95da;
  float: left;
  font-size: 0.5em;
  font-family: 'Poppins', sans-serif;
  transition: 0.9s;
  font-weight: 400;
}

.legg ul:hover li {
  transform: rotateY(360deg);
}

.legg ul:hover li:nth-child(1) {
  transition-delay: 0.9s;
}

<div class="legg-section">
  <h1 class="legg">
    <ul>
      <li>3</li>
      <li>0</li>
      <li>,</li>
      <li>5</li>
      <li>3</li>
      <li>8</li>
      <li>+</li>
      <div style="clear: both"></div>
    </ul>
  </h1>
  <h2 class="legg-desc">Leggs Broken</h2>
</div>

我遇到的第一个问题是当屏幕调整大小时数字会上下跳动。我很难将它固定在页面上的特定位置。第二件事是让它在屏幕大小上适当地扩展和收缩（现在有点问题）。
我花了很多时间试图修复和故障排除，但没有任何工作。任何帮助或建议将非常感谢!