实现带弧形路径的气泡式封面图片无限滚动动画

核心优化点 #

• 弧形轨迹实现：通过CSS关键帧动画，在X轴左移过程中加入Y轴上下起伏，模拟弧形路径；不同大小的气泡设置不同起伏幅度，增强层次感
• 无缝滚动：复制图片数组生成双倍内容，避免滚动到末尾出现空白
• 自然间距：给每个气泡设置随机右侧间距和动画延迟，让气泡分布错落有致

完整代码 #

import React from 'react';

const Footer = () => {
    const travelImages = [
        'https://i.pinimg.com/236x/26/67/42/266742e1a6565d6a94b6b881c441c2a3.jpg',
        // 填入你的其他图片链接
    ];
    // 复制数组实现无缝滚动衔接
    const doubledImages = [...travelImages, ...travelImages];

    // 随机生成尺寸及对应的弧形起伏幅度
    const getRandomConfig = () => {
        const configs = [
            { sizeClass: 'w-16 h-16', amplitude: '30px' },
            { sizeClass: 'w-24 h-24', amplitude: '40px' },
            { sizeClass: 'w-32 h-32', amplitude: '50px' },
        ];
        return configs[Math.floor(Math.random() * configs.length)];
    };

    return (
        <div className='w-full h-screen'>
            <div className='w-full h-[40vh] bg-blue-300 overflow-hidden relative'>
                {/* 滚动容器：垂直居中 */}
                <div className='absolute top-1/2 -translate-y-1/2 flex'>
                    {doubledImages.map((item, index) => {
                        const { sizeClass, amplitude } = getRandomConfig();
                        // 随机动画延迟（负值让气泡提前进入视野）
                        const animDelay = `${Math.random() * -30}s`;
                        // 随机右侧间距，避免排列过于规整
                        const randomGap = `${Math.random() * 20 + 10}px`;

                        return (
                            <div
                                key={index}
                                className={`rounded-full overflow-hidden ${sizeClass} bg-gray-200 flex-shrink-0`}
                                style={{
                                    marginRight: randomGap,
                                    animation: `moveArc 30s linear infinite ${animDelay}`,
                                    '--amplitude': amplitude,
                                }}
                            >
                                <img src={item} alt="travel" className='w-full h-full object-cover' />
                            </div>
                        );
                    })}
                </div>

                {/* 自定义弧形滚动动画 */}
                <style>{`
                    @keyframes moveArc {
                        0% {
                            transform: translateX(100vw) translateY(0);
                        }
                        25% {
                            transform: translateX(50vw) translateY(calc(var(--amplitude) * -1));
                        }
                        50% {
                            transform: translateX(0) translateY(0);
                        }
                        75% {
                            transform: translateX(-50vw) translateY(var(--amplitude));
                        }
                        100% {
                            transform: translateX(-100vw) translateY(0);
                        }
                    }
                `}</style>
            </div>
        </div>
    );
};

export default Footer;

代码说明 #

1. 无缝滚动处理：通过doubledImages复制原图片数组，当第一个数组滚动出视野时，第二个数组刚好衔接，实现无限循环无空白
2. 弧形路径控制：使用moveArc关键帧动画，在X轴从右到左移动的同时，Y轴按「0 → 上移 → 0 → 下移 → 0」的轨迹运动，形成流畅弧形；--amplitude自定义属性让不同大小的气泡有不同起伏幅度
3. 自然间距调整：随机的marginRight让气泡间距不固定，动画延迟animDelay让气泡进入视野的时间错开，避免整齐排列的生硬感
4. 垂直居中：滚动容器通过top-1/2 -translate-y-1/2实现垂直居中，保证弧形路径在容器中线区域运动

内容的提问来源于stack exchange，提问作者Fahad Khan