【记录】跑马灯无限滚动

じ星不离月か2026-03-12 11:52

思路：

文本复制一份，共两份；即滚动内容2个文本宽度

2.向左滚动一份的宽度（可通过js动态获取）

应用：

支持文本、富文本

应用代码待补充...

参考代码：

html 复制代码

<!DOCTYPE html>

<html lang="zh">
<head>
<meta charset="UTF-8">
<title>marquee demo</title>

<style>

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* 容器 */
.wrap{
  width:120px;
  height:40px;
  border:1px solid #333;
  overflow:hidden;
  margin:100px auto;
}

/* 滚动内容 */
.cont{
  display:flex;
  width:600px; /* 300 * 2 */
  animation:move 6s linear infinite;
}

/* 单段文本 */
.txt{
  width:300px;
  line-height:40px;
  white-space:nowrap;
  font-family:monospace;
}

@keyframes move{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-300px);
  }
}

</style>

</head>

<body>

<div class="wrap">
  <div class="cont">
    <div class="txt">123456789012345678901234567890</div>
    <div class="txt">123456789012345678901234567890</div>
  </div>
</div>

</body>
</html>

【记录】 跑马灯无限滚动

【记录】跑马灯无限滚动