1，前端需要標(biāo)題背景顯示流光的特效，

解決方案是根據(jù)時(shí)間周期動(dòng)態(tài)切換顯示圖片，營(yíng)造出流光的特效。

圖片路徑 src/assets/title-imgs，文件如圖顯示：

目錄

title_00000.png

title_00001.png

title_00002.png

title_00003.png

title_00004.png

完整文件如下：

<template>
    <div class="chart-container">
        <img
            class="title-bg"
            v-for="(png, i) in pngList"
            :key="i"
            v-show="i === currentPngIndex"
            :src="png"
            alt=""
        />
        <div class="title-text">{{ parsedText }}</div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onBeforeUnmount, onMounted } from 'vue'
  //  可以用props 傳入
  const parsedText = ref('標(biāo)題')
  //  圖片集合
  const pngList = ref<string[]>([])
  //  圖片序號(hào)
  const currentPngIndex = ref(-1)
  const carouselTimeoutId = ref<any>(null)
  // 流動(dòng)圖片總數(shù)
  const maxImgLength = ref(5)
  
  onMounted(() => {
    showNextPng()
  })
  onBeforeUnmount(() => {
    clearTimeout(carouselTimeoutId.value)
  })
  
  const getImgUrl = (name: string) => {
    // 當(dāng)前圖片路徑
    return new URL('../assets/title-imgs/' + name, import.meta.url).href
  }

  initImg()
  // 動(dòng)態(tài)設(shè)置所有圖片路徑
  function initImg() {
    for (let i = 0; i < maxImgLength.value; i++) {
      let suffix = ('00000' + i).slice(-5)
      let titleBg = getImgUrl(`title_${suffix}.png`)
      pngList.value.push(titleBg)
    }
  }
  
  function showNextPng() {
    let nextPngIndex = currentPngIndex.value + 1
    if (nextPngIndex >= pngList.value.length) {
      nextPngIndex = 0
    }
    currentPngIndex.value = nextPngIndex
    carouselTimeoutId.value = setTimeout(showNextPng, 180)
  }
  </script>
  
  <style scoped>
  .chart-container {
    width: 100%;
    height: 80px;
    position: relative;
  
    .title-bg {
      width: 100%;
      height: 100%;
      position: absolute;
    }
  
    .title-text {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      margin-top: 16px;
      color: #fff;
      font-weight: 700;
      font-size: 34px;
      letter-spacing: 4px;
    }
  }
  </style>