博客

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);
    }
}