无限循环滚动条 - 左出右进

做一个可以无限循环，左出右进效果的滚动条，效果如下：

1. 核心原理

无限循环滚动条的核心原理是通过两个相同的子元素（或内容）不断向某一方向移动，当其中一个子元素完全移出父容器时（-100%处），立即将其重置到起始位置，从而实现无缝循环滚动的效果。

初始状态：子元素A和B水平排列，A在父容器内，B在右侧。

动画开始：A和B同时向左移动。

当A完全移出父容器时，B已经占满父容器。

A被重置到B的右侧，继续向左移动，形成无限循环。

2. 实现步骤（Next+css）

2.1 HTML结构

创建父容器和两个相同的子元素：

jsx 复制代码

            <div className="overflow-hidden w-[500px]">
                <div className="flex justify-start w-full" >
                    
                    // 元素 A
                    <div 
                    className={`${styles["animate-slide-left"]} flex gap-2`} 
                    style={{ animationDuration: `${duration}s` }}>
                        {children}
                    </div>
                    // 元素 B
                    <div 
                    className={`${styles["animate-slide-left"]} flex gap-2`} 
                    style={{ animationDuration: `${duration}s` }}>
                        {children}
                    </div>
                    
                </div>
            </div>

父容器：用于限制显示区域，并隐藏溢出部分。
子元素：两个相同的内容，分别用于滚动和重置。

2.2 CSS样式

设置父容器和子元素的样式，并定义滚动动画：

css 复制代码

.animate-slide-left {
    display: flex;
    animation: slide-left 30s linear infinite;
    animation-duration: 30s;
    animation-delay: 3s;
    width: max-content;
}

@keyframes slide-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

要点：
- 子元素的宽度必须大于等于父容器，否则会出现空白或重叠。
- 动画时间可以根据需要调整，控制滚动速度。

3. 注意事项

3.1 子元素长度

子元素的长度必须至少等于父容器的宽度，否则会出现空白区域。
如果子元素内容较短，可以通过重复内容或增加空白填充来占满父容器。

3.2 动画性能

使用CSS动画（transform）而不是left或margin，以提高性能。
避免在低性能设备上使用过于复杂的动画。

3.3 浏览器兼容性

测试不同浏览器的兼容性，确保动画效果一致。
如果需要支持旧版浏览器，可以添加webkit-或moz-前缀。