实现原理

将要滚动的元素复制一份放在后面 然后使用动画将元素滚动到50%的位置后瞬间将滚动位置置为0

效果

const list = [
  {
    avatar: headerBg,
    text: '1纸类 累计减碳1吨，相当于回收10450 件快递箱',
  },
  {
    avatar: headerBg,
    text: '2纸类 累计减碳1吨，相当于回收10450 件快递箱',
  },
]
export default function Index() {
  return (
    <View className={classes.Index}>
      <View className={classNames(classes.container)}>
        <View className={classNames(classes.group, classes.scroll)}>
          {
            list.map((item) => (
              <View className={classNames(
                classes.item,
              )}
              >
                <Image src={item.avatar} className={classes.image} />
                <View className={classes.text}>{item.text}</View>
              </View>
            ))
          }
        </View>
        <View className={classNames(classes.group, classes.scroll)}>
          {
            list.map((item) => (
              <View className={classNames(
                classes.item,
              )}
              >
                <Image src={item.avatar} className={classes.image} />
                <View className={classes.text}>{item.text}</View>
              </View>
            ))
          }
        </View>
      </View>
    </View>
  )
}

.Index {
  width: 100vh;
  overflow: hidden;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

.group {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  padding-left: 20px;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

.scroll {
  will-change: transform;
  animation: scroll 10s linear infinite normal;
}