求文字滚动及改变样式的js

<div id="scrollContainer">
    <span id="scrollText">这是一个滚动的文字示例。</span>
</div>

#scrollContainer {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

#scrollText {
    display: inline-block;
    padding-left: 100%;
    animation: scrollText 10s linear infinite;
}

@keyframes scrollText {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

function changeTextStyle() {
    const textElement = document.getElementById('scrollText');
    textElement.style.color = getRandomColor();
    textElement.style.fontSize = getRandomFontSize();
}

function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function getRandomFontSize() {
    return Math.floor(Math.random() * 20) + 16 + 'px'; // 字体大小在16px到36px之间变化
}

setInterval(changeTextStyle, 3000); // 每3秒改变一次文字样式