vue3实现CSS无限无缝滚动效果

本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下
template
双层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%!}}

vue3实现CSS无限无缝滚动效果
文章图片

【vue3实现CSS无限无缝滚动效果】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读