css边框跑马灯效果

要实现CSS边框跑马灯效果，可以使用CSS3中的animation属性。下面是一个简单的例子：

<div class="marquee">
  <p>这是一段文字，用于演示CSS边框跑马灯效果。</p>
</div>

.marquee {
  width: 200px;
  height: 100px;
  border: 2px solid black;
  overflow: hidden;
}

.marquee p {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}

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

在这个例子中，我们首先创建了一个带边框的div元素，并将其overflow属性设置为hidden，以隐藏超出部分的内容。然后使用animation属性来设置marquee动画，其中5s表示动画时长，linear表示线性动画，infinite表示动画无限循环。最后，通过@keyframes规则来定义动画的关键帧，其中0%表示动画开始时的状态，100%表示动画结束时的状态，transform: translateX()用于实现平移动画效果。

这样，我们就实现了一个简单的CSS边框跑马灯效果。你可以根据需要调整动画时长、边框样式等属性来实现更满意的效果。