大屏项目文字滚动无缝衔接如何实现/？超级简单几个代码即可实现。收藏备用！

看图

代码结构

<div class="Swjc_list">
    <div class="SwjcTitle">
      <span>告警点位</span>
      <span>告警等级</span>
      <span>告警时间</span>
      <span>告警内容</span>
    </div>
    <div class="SwjcContent" ref="scrollContainer">
      <!-- 表格 -->
      <div class="SwjcTr" v-for="(item, index) in swjc_list" :key="index">
        <div class="SwjcTd">
          {{ item.place }}
        </div>
        <div :class="['SwjcFlag', flagClass(item.grade)]">
          {{ item.grade }}
        </div>
        <div class="SwjcTd">
          {{ item.time }}
        </div>
        <div class="SwjcTd">
          {{ item.value }}
        </div>
      </div>
    </div>
</div>

样式 + 动画

  .Swjc_list {
    padding-top: 18px;
    .SwjcTitle {
      background-color: rgba(0, 116, 141, 0.6);
      font-weight: bold;
      height: 45px;
      font-size: 14px;
      display: grid;
      grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;

      span {
        padding-left: 8px;
        text-align: left;
        display: flex;
        align-items: center;
      }
    }
  }
  .SwjcContent {
    height: 210px;
    overflow: hidden;
  }

  .SwjcTr {
    display: grid;
    height: 55px;
    grid-template-columns: 3fr 2fr 5fr 4.5fr;
    font-size: 14px;
    font-family: "Source Han Sans CN";
    font-weight: 500;
    color: #ffffff;
    line-height: 18px;
    align-items: center;
    text-align: left;
    background-color: transparent;
    animation: move 10s linear infinite;

    &:hover {
      background-color: rgba(0, 144, 255, 0.2);
      cursor: pointer;
    }

    .SwjcTd {
      padding-left: 9px;
    }

    .SwjcFlag {
      width: 40px;
      height: 21px;
      background: #ff302c;
      border-radius: 2px;
      display: flex;
      justify-content: center;
    }

    .Flag1 {
      background: #ff302c !important;
    }

    .Flag2 {
      background: #ff8a00 !important;
    }

    .Flag3 {
      background: #ffdf06 !important;
    }
  }

  @keyframes move {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(calc(-100% * 7)); /* 根据元素个数调整 */
    }
  }

实际核心部分

如果不这么设置会有很多小 bug，（转一两条就刷新了，多条同时转）看不到最后一条都有可能。

100% {
  transform: translateY(calc(-100% * 7)); /* 根据元素个数调整 */
}

如果想让他转完后继续再底下重复而不是直接闪一下刷新了数据就要定时给他push 原来的数据。