css实现单行文字，横向无限滚动效果

最终效果

原理

使用translateX, 将元素从0，移动到-100%, 并无限循环

注意事项

当第一次执行完毕，此时元素的位置是在-100%的位置，此时开始执行第二次，元素会迅速恢复到0%的位置，这不是我们期望的

我们期望的效果是文字始终从最右侧滚动到左侧，直至文字完全消失，然后又从最右侧开始，就像gif图片中的一样

实际就是滚动元素前缺少一个空白的占位元素，这个空白占位元素的宽度需要与最外层的容器的宽度一致，这样就能实现最终效果了

代码

<template>
  <div class="w-52 bg-slate-500 text-white overflow-hidden">
      <div class="o-text-content w-max whitespace-nowrap">
        滚滚长江东逝水，浪花淘尽英雄，是非成败... ...
      </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.o-text-content {
  animation: roll 5s linear infinite;

  &::before {
    content: '';
    display: inline-block;

    // 这里的长度需要与最外层容器一致
    width: 13rem;
    height: 100%;
  }
}

@keyframes roll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}
</style>