このような大画面のデジタルスクロール効果が必要になる場合があります

<div class="box">
  <p class="box-item">
    <span>1</span>
  </p>
</div>

.ボックスアイテム{
  位置: 相対的;
  表示: インラインブロック;
  幅: 54px;
  高さ: 82px;
  /* 背景画像 */
  背景: url(./number-bg.png) 繰り返しなし 中央 中央;
  背景サイズ: 100% 100%;
  フォントサイズ: 62px;
  行の高さ: 82px;
  テキスト配置: 中央;
}

<p class="box-item">
  0123456789
</p>

.ボックスアイテム{
  表示: インラインブロック;
  幅: 54px;
  高さ: 82px;
  背景: url(./number-bg.png) 繰り返しなし 中央 中央;
  背景サイズ: 100% 100%;
  フォントサイズ: 62px;
  行の高さ: 82px;
  テキスト配置: 中央;

  /* 新しく追加されたコード */
  位置: 相対的;
  書き込みモード: 垂直方向 (左)
  テキストの向き: 直立;
  /* オーバーフロー: 非表示; */
}
/* 新しく追加されたコード */
.box-item スパン {
  位置: 絶対;
  上: 10px;
  左: 50%;
  変換: translateX(-50%);
  文字間隔: 10px;
}

変換: `translate(-50%,-${number * 10}%)`

.box-item スパン {
  位置: 絶対;
  上: 10px;
  左: 50%;
  変換: translate(-50%,-50%);
  文字間隔: 10px;
}

間隔を設定する(() => {
  数値 = document.getElementById('数値') とします。
  ランダム = getRandomNumber(0,10) とします。
  number.style.transform = `translate(-50%, -${random * 10}%)`
}, 2000)
関数 getRandomNumber (最小値, 最大値) {
  Math.floor(Math.random() * (max - min + 1) + min) を返します。
}

小道具: {
  番号： {
    タイプ: 数値、
    デフォルト: 0
  }
}

定数MAX_LEN = 8

<ul>
  <li
    :class="{'数値項目': !isNaN(項目) }"
    v-for="(item,index) in computeNumber"
    :key="インデックス"
  >
    <span v-if="!isNaN(item)">
      <i ref="numberItem">0123456789</i>
    </span>
    <span v-else>{{item}}</span>
  </li>
</ul>

.数値項目 {
  幅: 50px;
  背景: url(./number-bg.png) 繰り返しなし 中央 中央;
  背景サイズ:100% 100%;
  & > スパン {
    位置: 相対的;
    表示: インラインブロック;
    右マージン: 10px;
    幅: 100%;
    高さ: 100%;
    書き込みモード: 垂直方向;
    テキストの向き: 直立;
    オーバーフロー: 非表示;
    & > 私 {
      位置: 絶対;
      上: 0;
      左: 50%;
      変換: translate(-50%,0);
      遷移: transform 0.5s イーズインアウト;
      文字間隔: 10px;
    }
  }
}

//時間指定増加数 increaseNumber() {
  自分 = これ
  this.timer = setInterval(() => {
    自己.newNumber = 自己.newNumber + getRandomNumber(1, 100)
    自己.setNumberTransform()
  }, 3000)
},
// 各桁のオフセットを設定する setNumberTransform () {
  numberItems = this.$refs.numberItem とします。
  numberArr = this.computeNumber.filter(item => !isNaN(item)) とします。
  for (let index = 0; index < numberItems.length; index++) {
    elem = numberItems[index]とします。
    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
  }
}