CSS 跑马灯效果很好地增加了网站页面的动态性和吸引力。除了简单的滚动外，循环滚动也是可取的。本文将探讨如何使用 CSS 实现跑马灯循环滚动效果。

.marquee {
white-space: nowrap;  /* 可以避免文本换行 */
overflow: hidden;  /* 超出宽度的文本隐藏 */
}
.marquee span {
display: inline-block;  /* 让文本能够并排排列 */
padding-left: 100%;  /* 让文本开始时处于容器最右侧，达到循环效果 */
animation: marquee 10s linear infinite;  /* 使用动画达到文本循环滚动效果 */
}
@keyframes marquee {
from {transform: translateX(0);}  /* 初始位置是左侧容器边界 */
to {transform: translateX(-100%);}  /* 终止位置是右侧容器边界 */
}

以上代码的实现原理是将文本容器的宽度固定为一定值，让文本排列在该容器的最右侧，从而达到文本从容器右侧开始循环滚动的效果。向左移动动画可以通过 CSS 的 transform 属性实现。

需要注意的是，如果文本容器的宽度不够宽，文本移动到最右侧后可能会出现截断效果。为了避免这种情况，可以考虑将容器宽度设得足够大，或者通过 JavaScript 动态计算文本实际宽度后再设置容器宽度。

跑马灯循环滚动效果在一些新闻、广告推广等场合非常实用，可以吸引用户的眼球，提高页面的互动性和受访度。但需要避免使用过度，以免影响页面的整体布局和内容展示。