Vue实现文字向上滚动

最新推荐文章于 2024-06-06 00:30:00 发布

小怪兽，让我来保护你

最新推荐文章于 2024-06-06 00:30:00 发布

阅读量1.4k

点赞数 2

文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/weixin_42812634/article/details/112604642

版权

本文介绍了如何使用Vue和CSS实现文字向上滚动的效果。当数组长度大于等于6时，文字会在容器内滚动显示，滚动速度为8秒完整循环。关键代码包括使用CSS的`@keyframes`定义动画`myMove`，以及在Vue中通过`v-for`遍历数组并应用样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 实现文字向上滚动

先看下效果图（不会插动态的，静态的将就看吧）：
在这里插入图片描述
下面直接上代码：
HTML部分(当数组长度小于6时，正常显示，长度大于等于6时，滚动显示)：

<div :class="arr.length >= 6?'inner-container':'flowText'" >
   <p class="text" v-for="(text,index) in arr" :key="index">{{text}}</p>
</div>

CSS部分：

.inner-container {
    animation: myMove 8s linear infinite;  //规定滚动时长为8s
    animation-fill-mode: forwards;
    font-size: 15px;
    color: #333;
    line-height: 35px;
}
.flowText {
    font-size: 15px;
    color: #333;
    line-height: 35px;
}

@keyframes myMove {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-150px);
    }
}