html滚动字幕：HTML滚动字幕实现教程，从基础到高级

来源：网络作者：日期：2025-10-12 05:51:06

什么是HTML滚动字幕？

HTML滚动字幕是一种在网页上实现文字自动滚动显示的效果，常用于网站标题、广告横幅、新闻滚动条等场景，这种效果可以增强网页的视觉吸引力，吸引用户注意,同时有效传达信息。

实现HTML滚动字幕的两种主要方法

使用CSS动画实现简单滚动字幕

这种方法适用于不需要复杂交互的简单滚动效果，实现起来代码量少,性能较好。

<!DOCTYPE html>
<html>
<head>
    <style>
        .scrolling-text {
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            background: #333;
            color: white;
            padding: 10px 0;
        }
        .scrolling-text span {
            display: inline-block;
            padding-left: 100%;
            animation: scroll 10s linear infinite;
        }
        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>
    <div class="scrolling-text">
        <span>欢迎访问我们的网站！这是一个简单的HTML滚动字幕效果。</span>
    </div>
</body>
</html>

使用JavaScript实现复杂滚动字幕

这种方法可以实现更复杂的交互效果，如暂停、加速、改变内容等。

<!DOCTYPE html>
<html>
<head>
    <style>
        .scrolling-text {
            white-space: nowrap;
            overflow: hidden;
            width: 100%;
            background: #333;
            color: white;
            padding: 10px 0;
            position: relative;
        }
        .scrolling-text span {
            display: inline-block;
            padding-left: 100%;
        }
    </style>
</head>
<body>
    <div class="scrolling-text" id="scrollingText">
        <span>欢迎访问我们的网站！这是一个JavaScript实现的滚动字幕效果。</span>
    </div>
    <script>
        const textElement = document.getElementById('scrollingText');
        let isScrolling = true;
        let scrollSpeed = 1; // 速度值，越大越快
        function scrollText() {
            if (isScrolling) {
                textElement.scrollLeft += scrollSpeed;
                // 当文字完全移出可视区域时，添加新的文字
                if (textElement.scrollLeft >= textElement.scrollWidth) {
                    const currentText = textElement.querySelector('span').textContent;
                    textElement.innerHTML = `<span>${currentText}</span><span>${currentText}</span>`;
                    textElement.scrollLeft = 0;
                }
            }
            requestAnimationFrame(scrollText);
        }
        // 开始滚动
        scrollText();
        // 可以添加鼠标悬停时暂停滚动的效果
        textElement.addEventListener('mouseenter', () => {
            isScrolling = false;
        });
        textElement.addEventListener('mouseleave', () => {
            isScrolling = true;
        });
    </script>
</body>
</html>