网页滚动文字HTML怎么制作？-网页设计-锦华智联科技

使用 HTML `<marquee>` 标签（最简单，但不推荐）

这是最古老、最简单的方法，但它在现代网页开发中已不被推荐使用，因为 <marquee> 是一个非标准的 HTML 标签，它只在部分浏览器（如旧版 IE）中表现良好，在现代浏览器中可能无法正常工作，并且它不利于搜索引擎优化（SEO）。

（图片来源网络，侵删）

代码示例：

<marquee behavior="scroll" direction="left" scrollamount="5">
    这是一段从左向右滚动的文字，欢迎使用HTML！
</marquee>

参数说明：

direction: 滚动方向，可选值 left, right, up, down。
behavior: 滚动方式，可选值 scroll (循环滚动), slide (滚动一次后停止), alternate (来回滚动)。
scrollamount: 滚动速度，数值越大越快。

为什么不推荐？

非标准：不属于 HTML 或 HTML5 规范。
兼容性差：在 Firefox、Chrome 等现代浏览器中可能无效或样式错乱。
无障碍性差：屏幕阅读器等辅助技术可能无法正确解析。
样式控制弱：很难用 CSS 进行精细的样式控制。

使用 CSS 动画（推荐，现代标准）

这是目前最推荐、最专业的方法，它利用 CSS 的 @keyframes 规则和 animation 属性来实现滚动效果，兼容性好，性能优异，并且样式控制非常灵活。

（图片来源网络，侵删）

我们将分两种情况来实现 CSS 滚动：

情况 A：单行文字，从右向左无限循环滚动

这种效果常用于网站顶部的通知栏。

核心思路：

创建一个容器,设置 overflow: hidden 来隐藏超出部分。
在容器内,创建一个 <div> 包裹滚动文字。
使用 CSS animation 让这个 <div> 从右向左移动。
关键在于,为了让滚动无缝衔接，文字内容需要复制一份，并紧跟在原始文字后面，当第一部分文字滚出视野时，第二部分文字刚好接上，形成无限循环。

完整代码示例：

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">CSS 滚动文字示例</title>
    <style>
        /* 1. 设置容器样式，隐藏溢出内容 */
        .scroll-container {
            width: 100%;
            background-color: #f0f0f0;
            padding: 10px 0;
            overflow: hidden; /* 关键：隐藏超出容器的部分 */
            white-space: nowrap; /* 关键：让文字不换行 */
        }
        /* 2. 设置滚动内容的样式 */
        .scroll-content {
            display: inline-block; /* 关键：让内容可以水平排列 */
            padding-left: 100%; /* 从最右边开始 */
            animation: scroll-left 15s linear infinite; /* 关键：应用动画 */
        }
        /* 3. 定义动画关键帧 */
        @keyframes scroll-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%); /* 向左移动自身宽度的距离 */
            }
        }
    </style>
</head>
<body>
    <h2>单行无缝滚动文字</h2>
    <div class="scroll-container">
        <div class="scroll-content">
            欢迎访问我的网站！这里有最新的资讯和有趣的内容，欢迎访问我的网站！这里有最新的资讯和有趣的内容。
        </div>
    </div>
</body>
</html>

代码解析：

.scroll-container: overflow: hidden 和 white-space: nowrap 是实现滚动效果的基础。
.scroll-content: display: inline-block 允许我们将文字块作为一个整体来移动。animation 属性将我们定义的 scroll-left 动画应用到这个元素上，并设置为无限循环 (infinite)。
@keyframes scroll-left: 定义了动画的起点 (0%) 和终点 (100%)，从 translateX(0)（原地）移动到 translateX(-100%)（向左移动自身100%的宽度）。
无缝循环的技巧：我们通过设置 padding-left: 100% 让内容块从容器最右边开始，然后向左移动 100% 的距离，这样当它完全移出视野时，看起来就像是无缝循环的，注意，.scroll-content 内部的文字需要是重复的。

情况 B：多行文字，垂直或水平滚动

对于多行文字,我们可以使用类似的方法，但动画方向变为垂直。

完整代码示例（垂直滚动）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">CSS 多行滚动文字</title>
    <style>
        body {
            font-family: sans-serif;
        }
        .multi-scroll-container {
            width: 300px;
            height: 150px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow: hidden; /* 隐藏溢出 */
            position: relative; /* 为子元素定位提供参考 */
        }
        .multi-scroll-content {
            animation: scroll-up 10s linear infinite;
        }
        /* 定义向上滚动的动画 */
        @keyframes scroll-up {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-100%); /* 向上移动自身高度的100% */
            }
        }
        /* 为了让内容更清晰，给每行文字加个样式 */
        .multi-scroll-content p {
            margin: 0;
            padding: 5px 0;
            border-bottom: 1px dashed #eee;
        }
    </style>
</head>
<body>
    <h2>多行垂直滚动文字</h2>
    <div class="multi-scroll-container">
        <div class="multi-scroll-content">
            <p>这是第一条滚动新闻。</p>
            <p>这是第二条滚动新闻，内容稍长一些。</p>
            <p>这是第三条滚动新闻。</p>
            <p>这是第四条滚动新闻。</p>
            <p>这是第五条滚动新闻。</p>
            <p>这是第一条滚动新闻。</p> <!-- 复制一份以实现无缝循环 -->
            <p>这是第二条滚动新闻，内容稍长一些。</p>
        </div>
    </div>
</body>
</html>

代码解析：

.multi-scroll-container: 设置了固定 height 和 overflow: hidden，这是垂直滚动的关键。
@keyframes scroll-up: 动画方向变为 translateY，向上移动 100% 的高度。
同样,为了让垂直滚动无缝，我们也需要复制一份内容放在末尾。

使用 JavaScript（最灵活，适用于复杂场景）

当滚动效果需要更复杂的交互（如鼠标悬停暂停、动态加载数据、响应式调整速度等）时，使用 JavaScript 是最佳选择。

核心思路：

用 HTML 搭建基本结构。
用 CSS 设置好容器和内容的样式（隐藏溢出等）。
用 JavaScript 动态改变内容的 transform 或 scrollLeft/scrollTop 属性，并结合 requestAnimationFrame 或 setInterval 来实现平滑的动画效果。

代码示例（鼠标悬停暂停的水平滚动）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JavaScript 滚动文字</title>
    <style>
        .js-scroll-container {
            width: 100%;
            background-color: #333;
            color: white;
            padding: 15px 0;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
        }
        .js-scroll-content {
            display: inline-block;
            padding-left: 100%;
            /* 初始位置由JS控制 */
        }
    </style>
</head>
<body>
    <h2>JavaScript 控制的滚动文字（鼠标悬停暂停）</h2>
    <div class="js-scroll-container" id="scrollContainer">
        <div class="js-scroll-content" id="scrollContent">
            这是由JavaScript驱动的滚动文字，可以实现更复杂的交互，比如鼠标悬停暂停！试试看吧！
        </div>
    </div>
    <script>
        const container = document.getElementById('scrollContainer');
        const content = document.getElementById('scrollContent');
        let animationId;
        let position = 100; // 从100%开始
        function animate() {
            position -= 0.2; // 控制滚动速度
            if (position <= -100) { // 当内容完全滚出，重置位置
                position = 100;
            }
            content.style.transform = `translateX(${position}%)`;
            animationId = requestAnimationFrame(animate);
        }
        // 鼠标悬停时暂停
        container.addEventListener('mouseenter', () => {
            cancelAnimationFrame(animationId);
        });
        // 鼠标移出时继续
        container.addEventListener('mouseleave', () => {
            animate();
        });
        // 开始动画
        animate();
    </script>
</body>
</html>

代码解析：

requestAnimationFrame(animate): 这是实现流畅动画的现代 API，它会告诉浏览器你希望执行一个动画，并且会在下一次重绘之前调用指定的回调函数。
cancelAnimationFrame(animationId): 用于取消一个已经排队的动画帧请求。
交互逻辑：通过监听容器的 mouseenter 和 mouseleave 事件，我们可以轻松地控制动画的暂停和继续，这是 CSS 动画难以实现的。

总结与建议

方法	优点	缺点	适用场景
`<marquee>`	书写最简单	非标准，兼容性差，样式难控制，不利于SEO	几乎不推荐使用，仅用于非常老旧的页面维护。
CSS 动画	性能好，兼容性好，代码简洁，易于实现无缝循环	交互性差（如暂停、继续）	绝大多数滚动场景，如公告栏、新闻列表、跑马灯等。
JavaScript	灵活性最高，可实现任意复杂的交互和动态效果	代码量稍多，需要编写 JS 逻辑	需要复杂交互、动态内容、或需要精确控制动画细节的场景。

给你的建议：

如果只是做一个简单的、不需要交互的滚动效果，请直接使用方法二（CSS 动画），这是目前业界公认的最佳实践。
如果你的滚动效果需要用户交互（比如鼠标放上去就停），或者内容是动态从服务器获取的，请使用方法三（JavaScript），它提供了无与伦比的灵活性。

网页滚动文字HTML怎么制作？

使用 HTML <marquee> 标签（最简单，但不推荐）

使用 CSS 动画（推荐，现代标准）

情况 A：单行文字，从右向左无限循环滚动

情况 B：多行文字，垂直或水平滚动

使用 JavaScript（最灵活，适用于复杂场景）

总结与建议

使用 HTML `<marquee>` 标签（最简单，但不推荐）