vue3實現CSS無限無縫滾動效果
更新時間:2021年06月28日 14:21:10 作者:Cardhu丶
這篇文章主要為大家詳細介紹了vue3實現CSS無限無縫滾動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue3實現CSS無限無縫滾動效果的具體代碼,供大家參考,具體內容如下
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
復制dom元素中的內容,銜接上一次滾動效果
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%! } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue2+element-ui+nodejs實現圖片上傳和修改圖片到數據庫的方法
在Web開發(fā)中經常需要使用圖片,有時候需要對圖片進行上傳,這篇文章主要給大家介紹了關于vue2+element-ui+nodejs實現圖片上傳和修改圖片到數據庫的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04