css 文字跑马灯效果

实现CSS文字跑马灯效果，可以使用CSS3的动画属性，通过动画关键帧来实现文字的无限循环滚动。

示例代码如下：

HTML:

<div class="marquee">
  <span>这是一段要滚动的文字内容</span>
</div>

CSS:

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

解释：

1. `.marquee` 容器设置了宽度为100%和 `overflow: hidden` 属性，这样子容器中的文字内容就可以超出容器范围而不被显示出来。

2. `.marquee span` 设置了 `display: inline-block` 和 `padding-left: 100%`，这样子文字内容就可以被强制换行，并且在容器的右侧留出100%的空间。

3. `@keyframes marquee` 设置了动画帧，从0%开始，文字的位置在左侧，到100%结束，文字的位置在左侧外面。

4. `.marquee span` 设置了 `animation` 属性，将动画应用于文字内容，设置了动画时间为15秒，动画速度为线性，无限循环播放。