vue3實(shí)現CSS無(wú)限無(wú)縫滾動(dòng)效果

本文實(shí)例為大家分享了vue3實(shí)現CSS無(wú)限無(wú)縫滾動(dòng)效果的具體代碼，供大家參考，具體內容如下

template

雙層div嵌套，進(jìn)行隱藏滾動(dòng)顯示

<div class="list-container">
  <div class="marquee" id="carList">
    <template v-for="(item, index) in dataMap.list" :key="index">
      <div class="list-item">
        <div class="item-name text-overflow">{{ item.name }}</div>
        <div class="item-road text-overflow">{{ item.road }}</div>
      </div>
    </template>
  </div>
</div>

script

復制dom元素中的內容，銜接上一次滾動(dòng)效果

export default defineComponent({
  setup() {
    const dataMap = reactive({
      list: [
        { name: '浙A89268', road: '游8路', status: 0 },
        { name: '浙A89268', road: '游8路', status: 0 },
        { name: '浙A89268', road: '游8路', status: 1 },
        { name: '浙A89268', road: '游8路', status: 0 },
        { name: '浙A89268', road: '游8路', status: 1 },
        { name: '浙A89268', road: '游1路', status: 0 },
      ],
    });
    onMounted(() => {
      const marquee = document.getElementById('carList');
      marquee.innerHTML = marquee.innerHTML + marquee.innerHTML;
    });
  }
})

style

CSS手寫(xiě)動(dòng)畫(huà)效果

.list-container {
  width: 720px;
  height: 170px;
  margin-left: 13px;
  overflow: hidden;
  position: relative;
}
//無(wú)限滾動(dòng)
.marquee {
  //animation-delay: -5s;
  animation: marquee 15s linear infinite;
}
.marquee:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-51%); //這里不是-100%！
  }
}

以上就是本文的全部?jì)热?，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。