本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下 template 双层div嵌套,进行隐藏滚动显示 <div class="li
本文实例为大家分享了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%!
}
}
--结束END--
本文标题: vue3实现CSS无限无缝滚动效果
本文链接: https://www.lsjlt.com/news/129303.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0