文字定时向上滚动js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字定时向上滚动</title>
    <style>
        #scrollContainer {
            width: 100%;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        #scrollContent {
            position: absolute;
            width: 100%;
            animation: scrollUp 10s linear infinite;
        }
        @keyframes scrollUp {
            0% { transform: translateY(100%); }
            100% { transform: translateY(-100%); }
        }
    </style>
</head>
<body>
    <div id="scrollContainer">
        <div id="scrollContent">
            <p>这是第一条新闻。</p>
            <p>这是第二条新闻。</p>
            <p>这是第三条新闻。</p>
        </div>
    </div>

    <script>
        function startScroll() {
            const content = document.getElementById('scrollContent');
            content.innerHTML += content.innerHTML; // 复制内容以实现无缝滚动
        }
        window.onload = startScroll;
    </script>
</body>
</html>

@keyframes scrollUp {
    0% { transform: translateY(100%); }
    100% { transform: translateY(-100%); }
}
#scrollContent {
    animation: scrollUp 15s linear infinite; /* 调整时间 */
}

function startScroll() {
    const content = document.getElementById('scrollContent');
    content.innerHTML += content.innerHTML; // 复制内容
}

@media (max-width: 600px) {
    #scrollContainer {
        height: 150px;
    }
}