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

更新時(shí)間：2021年06月28日 14:21:10 作者：Cardhu丶

這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)CSS無(wú)限無(wú)縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

復(fù)制dom元素中的內(nèi)容，銜接上一次滾動(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ī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3使用viewer的詳細(xì)用法舉例
viewer.js用于圖片瀏覽的Vue組件,支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作,這篇文章主要給大家介紹了關(guān)于vue3使用viewer的詳細(xì)用法,文中通過(guò)代碼介紹是非常詳細(xì),需要的朋友可以參考下
2023-12-12
Vue.js仿Metronic高級(jí)表格（二）數(shù)據(jù)渲染
這篇文章主要為大家詳細(xì)介紹了Vue.js仿Metronic高級(jí)表格的數(shù)據(jù)渲染，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
vue3響應(yīng)式原理之Ref用法及說(shuō)明
這篇文章主要介紹了vue3響應(yīng)式原理之Ref用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
優(yōu)雅的處理vue項(xiàng)目異常實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的處理vue項(xiàng)目異常的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
使用Vue3和Plotly.js繪制交互式漏斗圖的示例代碼
漏斗圖常用于可視化業(yè)務(wù)流程中的各個(gè)階段的轉(zhuǎn)換率,例如銷(xiāo)售漏斗或營(yíng)銷(xiāo)漏斗,它可以幫助用戶(hù)識(shí)別流程中的瓶頸和改進(jìn)機(jī)會(huì),本文給大家介紹了如何使用Vue3和Plotly.js繪制交互式漏斗圖,,文中有相關(guān)代碼示例供大家參考,需要的朋友可以參考下
2024-07-07
淺談VueJS SSR 后端繪制內(nèi)存泄漏的相關(guān)解決經(jīng)驗(yàn)
這次我想給大家介紹的內(nèi)存泄漏的定位方法，并非工具的使用。而是一些經(jīng)驗(yàn)的總結(jié)，也就是我所知道的 VueJS SSR 中最容易出現(xiàn)內(nèi)存泄漏的地方，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-12-12
vue-mugen-scroll組件實(shí)現(xiàn)pc端滾動(dòng)刷新
這篇文章主要為大家詳細(xì)介紹了vue-mugen-scroll組件實(shí)現(xiàn)pc端滾動(dòng)刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08
在瀏覽器console中如何調(diào)用vue內(nèi)部方法
這篇文章主要介紹了在瀏覽器console中如何調(diào)用vue內(nèi)部方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue 數(shù)組和對(duì)象更新,但是頁(yè)面沒(méi)有刷新的解決方式
今天小編就為大家分享一篇Vue 數(shù)組和對(duì)象更新,但是頁(yè)面沒(méi)有刷新的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
學(xué)習(xí)Vue組件實(shí)例
本篇文章給大家分享了Vue實(shí)例的相關(guān)內(nèi)容以及重要知識(shí)點(diǎn)，對(duì)此有興趣的朋友可以跟著學(xué)習(xí)參考下。
2018-04-04