如何同时滚动两行？

<style>
    .scroll {
        width: 200px;
        height: 20px;
        overflow: hidden;
        position: relative;
    }

    .scroll .text {
        position: absolute;
        white-space: nowrap;
        animation: scroll 10s linear infinite;
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-100%);
        }
    }
</style>

<div class="scroll">
    <div class="text">第一行文本</div>
    <div class="text">第二行文本</div>
</div>

<style>
    .scroll {
        width: 200px;
        height: 20px;
        overflow: hidden;
        position: relative;
    }

    .scroll .text {
        position: absolute;
        white-space: nowrap;
    }
</style>

<div class="scroll">
    <div class="text">第一行文本</div>
    <div class="text">第二行文本</div>
</div>

<script>
    var container = document.querySelector('.scroll');
    var texts = container.querySelectorAll('.text');
    var scrollSpeed = 1; // 滚动速度，可根据需要调整

    function scrollText() {
        for (var i = 0; i < texts.length; i++) {
            var text = texts[i];
            var textWidth = text.offsetWidth;
            var containerWidth = container.offsetWidth;

            if (textWidth > containerWidth) {
                text.style.transform = 'translateX(' + (-scrollSpeed) + 'px)';
            } else {
                text.style.transform = 'translateX(0)';
            }
        }

        requestAnimationFrame(scrollText);
    }

    scrollText();
</script>