公告、新闻列表-上下无限滚动（css+animation）

代码实现了一个无限循环滚动的列表效果。通过v-for指令将tipList数组循环渲染两次，并使用CSS动画让列表向上滚动。设置.content容器高度固定并隐藏溢出，.listBox使用绝对定位和scrollUp动画，在25秒内从0%滚动到-50%位置，形成无缝循环的视觉效果。关键点包括：双列表渲染保证内容连续、translateY(-50%)实现半屏滚动、infinite参数使动画无限循环。

SB52220

246人浏览 · 2025-06-17 10:26:19

SB52220 · 2025-06-17 10:26:19 发布

//list 循环两次同样内容
<div class="content">
  <ul class="listBox">
    <li v-for="(item, index) in tipList" :key="index" class="list"></li>
    <li v-for="(item, index) in tipList" :key="index" class="list"></li>
  </ul>
</div>

//css
.content{
      height: 270px;
      overflow: hidden;
      position: relative;
 }
.listBox {
    position: absolute;
    animation: scrollUp 25s linear infinite;
 }

//滚动50%，视觉效果-内容循环覆盖
@keyframes scrollUp {
 0% {
     transform: translateY(0%);
    }
 100% {
    transform: translateY(-50%);
 }