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">{{ ad }}</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 = ElementById('carList');
marquee.innerHTML = marquee.innerHTML + marquee.innerHTML;
});
}
})
style
CSS⼿写动画效果
.list-container {
width: 720px;
height: 170px;
margin-left: 13px;
overflow: hidden;
position: relative;
html滚动效果代码
}
//⽆限滚动
.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%！
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。