原生CSS实现双向循环滑动logo墙

预览图

源码：

html

 <div class="circle-logo-box">
        <div class="circle-logo-container">
            <!-- 第一行图片，从右向左滑动 -->
            <div class="circle-logo-content scroll-left">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">

            </div>
            <!-- 第二行图片，从左向右滑动 -->
            <div class="circle-logo-content scroll-right">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
                <img src="https://p3-passport.byteacctimg.com/img/user-avatar/6c5a1a7cad07f0b0e4332b25b13b633a~40x40.awebp" alt="">
            </div>
        </div>
    </div>

CSS

        .circle-logo-box {
            width: 100%;
            overflow: hidden; /* 隐藏超出内容 */
        }
        .circle-logo-container {
            max-width: 1440px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .circle-logo-content {
            display: flex;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        /* 图片样式 */
        .circle-logo-content img {
            width: calc(100% / 7);
            flex-shrink: 0;
        }
        
        /* 从右往左滑动动画 */
        @keyframes scroll-left {
            from { transform: translateX(0%); }
            to { transform: translateX(-100%); }
        }
        /* 从左往右滑动动画 */
        @keyframes scroll-right {
            from { transform: translateX(-100%); }
            to { transform: translateX(0%); }
        }
        /* 设置动画 */
        .scroll-left {
            animation: scroll-left 15s linear infinite;
        }
        .scroll-right {
            animation: scroll-right 15s linear infinite;
        }