marquee js无缝滚动

marquee 是一个 HTML 标签，用于创建文本或图像的滚动效果。然而，由于其在不同浏览器中的兼容性问题以及不符合现代网页设计标准，<marquee> 标签已被废弃。尽管如此，仍有一些开发者使用 JavaScript 库来实现类似的无缝滚动效果。

基础概念

无缝滚动指的是内容在滚动到末端后会立即从开始位置重新开始滚动，从而实现连续不断的滚动效果。

类型

水平滚动：内容从右向左或从左向右滚动。
垂直滚动：内容从下向上或从上向下滚动。

应用场景

新闻网站：实时更新的新闻标题。
社交媒体：最新的帖子或消息。
广告横幅：循环播放的广告信息。

示例代码

以下是一个使用 JavaScript 和 CSS 实现水平无缝滚动的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无缝滚动示例</title>
<style>
  .marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }
  .marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
  }
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>
</head>
<body>

<div class="marquee">
  <span>这是一个无缝滚动的示例文本。欢迎来到这里！ </span>
</div>

</body>
</html>