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