css 超出文字头尾相接滚动_如何实现图片或文字跑马灯滚动首尾相接循环滚动的效果，不出现滚动显示完后的短暂空白呀？...

要实现文字或图片的跑马灯效果，可以使用CSS的animation属性和@keyframes规则。下面是一个文字跑马灯的示例代码：

HTML代码：

<div class="marquee">
  <span>这是一段跑马灯文字，这是一段跑马灯文字，这是一段跑马灯文字，这是一段跑马灯文字，这是一段跑马灯文字，这是一段跑马灯文字，</span>
</div>

CSS代码：

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee span {
  animation: marquee 10s linear infinite;
  display: inline-block;
  padding-right: 100%;
}

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

解释：

1. 把要做跑马灯效果的文字包裹在一个div元素中，并设置div的宽度为100%，overflow为hidden，以便超出部分不显示。
2. 给文字span元素设置animation属性，让其执行名为marquee的动画，时长为10秒，动画效果为线性匀速运动，无限循环。
3. 给文字span元素设置display:inline-block属性，使其能够设置padding-right属性，用来实现跑马灯文字首尾相接的效果。
4. 在@keyframes规则中定义动画效果：从左到右平移，平移距离为元素自身宽度的负值。这样文字就可以实现首尾相接的跑马灯效果了。

如果要实现图片的跑马灯效果，可以把文字span元素改为img元素，并设置宽度和高度即可。