欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3實現(xiàn)CSS無限無縫滾動效果

 更新時間:2021年06月28日 14:21:10   作者:Cardhu丶  
這篇文章主要為大家詳細介紹了vue3實現(xiàn)CSS無限無縫滾動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

template

雙層div嵌套,進行隱藏滾動顯示

<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)容,銜接上一次滾動效果

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手寫動畫效果

.list-container {
  width: 720px;
  height: 170px;
  margin-left: 13px;
  overflow: hidden;
  position: relative;
}
//無限滾動
.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%!
  }
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 前端項目中如何使用百度地圖api(含實例)

    前端項目中如何使用百度地圖api(含實例)

    當我們遇到定位展示的時候會出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項目中如何使用百度地圖api(含實例)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-06-06
  • Vue中的字符串模板的使用

    Vue中的字符串模板的使用

    本篇文章主要介紹了Vue中的字符串模板的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • Vue3中進行頁面局部刷新組件刷新的操作方法

    Vue3中進行頁面局部刷新組件刷新的操作方法

    這篇文章主要介紹了Vue3中進行頁面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • Vue組件通信的四種方式匯總

    Vue組件通信的四種方式匯總

    這篇文章主要給大家介紹了關(guān)于Vue組件通信的四種方式,分別是父子組件通信、非父子組件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習學(xué)習吧。
    2018-02-02
  • vue基礎(chǔ)入門之vuex安裝與使用

    vue基礎(chǔ)入門之vuex安裝與使用

    vuex是一個專為vue.js應(yīng)用程序開發(fā)的 狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue入門之vuex安裝與使用的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • Vue移動端項目實現(xiàn)使用手機預(yù)覽調(diào)試操作

    Vue移動端項目實現(xiàn)使用手機預(yù)覽調(diào)試操作

    這篇文章主要介紹了Vue移動端項目實現(xiàn)使用手機預(yù)覽調(diào)試操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 基于Vue單文件組件詳解

    基于Vue單文件組件詳解

    下面小編就為大家?guī)硪黄赩ue單文件組件詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue2+element-ui+nodejs實現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫的方法

    vue2+element-ui+nodejs實現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫的方法

    在Web開發(fā)中經(jīng)常需要使用圖片,有時候需要對圖片進行上傳,這篇文章主要給大家介紹了關(guān)于vue2+element-ui+nodejs實現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2024-04-04
  • JointJS流程圖的繪制方法

    JointJS流程圖的繪制方法

    這篇文章主要為大家介紹了JointJS流程圖的繪制方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • 詳解vue的Des加密解密

    詳解vue的Des加密解密

    這篇文章主要為大家介紹了vue的Des加密解密使用實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09

最新評論