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手寫動(dòng)畫效果
.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)文章
前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)
當(dāng)我們遇到定位展示的時(shí)候會(huì)出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
本篇文章主要介紹了Vue中的字符串模板的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Vue3中進(jìn)行頁(yè)面局部刷新組件刷新的操作方法
這篇文章主要介紹了Vue3中進(jìn)行頁(yè)面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關(guān)于Vue組件通信的四種方式，分別是父子組件通信、非父子組件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-02-02
vuex是一個(gè)專為vue.js應(yīng)用程序開(kāi)發(fā)的 狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue入門之vuex安裝與使用的相關(guān)資料,需要的朋友可以參考下2021-08-08
Vue移動(dòng)端項(xiàng)目實(shí)現(xiàn)使用手機(jī)預(yù)覽調(diào)試操作
這篇文章主要介紹了Vue移動(dòng)端項(xiàng)目實(shí)現(xiàn)使用手機(jī)預(yù)覽調(diào)試操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
下面小編就為大家?guī)?lái)一篇基于Vue單文件組件詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的方法
在Web開(kāi)發(fā)中經(jīng)常需要使用圖片,有時(shí)候需要對(duì)圖片進(jìn)行上傳,這篇文章主要給大家介紹了關(guān)于vue2+element-ui+nodejs實(shí)現(xiàn)圖片上傳和修改圖片到數(shù)據(jù)庫(kù)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
這篇文章主要為大家介紹了JointJS流程圖的繪制方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要為大家介紹了vue的Des加密解密使用實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09