css文字跑马灯无缝衔接

要实现CSS文字跑马灯无缝衔接，可以使用CSS3的动画特性和伪元素来实现。以下是一个示例代码：

HTML代码：

<div class="marquee">
  <span>This is a demo of CSS Marquee</span>
</div>

CSS代码：

.marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.marquee span {
  position: absolute;
  left: 100%;
  display: inline-block;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

解释：

- `.marquee` 元素的 `position` 属性设置为 `relative`，以便让内部元素 `span` 的绝对定位相对于 `.marquee` 元素。
- `.marquee` 元素的 `overflow` 属性设置为 `hidden`，以隐藏 `span` 元素超出父元素的内容。
- `.marquee` 元素的 `white-space` 属性设置为 `nowrap`，以防止换行。
- `.marquee span` 元素的 `position` 属性设置为 `absolute`，以便让它们相对于 `.marquee` 元素的左边界定位。
- `.marquee span` 元素的 `left` 属性设置为 `100%`，以便让它们开始时从父元素的右侧进入。
- `.marquee span` 元素的 `display` 属性设置为 `inline-block`，以便让它们在同一行显示。
- `.marquee span` 元素的 `animation` 属性定义了动画名称、持续时间、动画速度和循环次数。
- `@keyframes marquee` 定义了动画的关键帧，从 0% 到 100% 分别表示动画的开始和结束状态。在这个例子中，我们使用 `transform: translateX()` 属性将 `span` 元素向左移动，从而实现了文字跑马灯效果。

通过以上代码，你可以实现一个CSS文字跑马灯无缝衔接的效果。