纯CSS3实现边框跑马灯特效

可以使用CSS3的动画属性和伪元素来实现边框跑马灯特效。

首先，需要给元素设置一个固定的宽度和高度，并设置边框样式。然后，使用伪元素::before和::after来创建两个半透明的遮罩层，覆盖在元素的边框上方。

接下来，使用CSS3的动画属性来使伪元素移动。将伪元素的宽度设置为0，然后使用@keyframes关键字定义动画，让伪元素从左侧或右侧移动到另一侧，并将宽度逐渐增加到与元素相同的宽度。

最后，使用animation属性将动画应用到伪元素上，并设置动画的持续时间、延迟时间和循环次数。

下面是一个示例代码：

HTML代码：

<div class="marquee">
  <p>这是一个边框跑马灯特效</p>
</div>

CSS代码：

.marquee {
  width: 500px;
  height: 100px;
  padding: 20px;
  border: 2px solid #000;
  position: relative;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  background-color: rgba(255, 255, 255, 0.5);
}
.marquee::before {
  left: 0;
  animation: marquee-left 5s ease-in-out infinite;
}
.marquee::after {
  right: 0;
  animation: marquee-right 5s ease-in-out infinite;
}
@keyframes marquee-left {
  0% {
    width: 0;
    transform: translateX(0);
  }
  50% {
    width: 100%;
    transform: translateX(0);
  }
  100% {
    width: 0;
    transform: translateX(100%);
  }
}
@keyframes marquee-right {
  0% {
    width: 0;
    transform: translateX(0);
  }
  50% {
    width: 100%;
    transform: translateX(0);
  }
  100% {
    width: 0;
    transform: translateX(-100%);
  }
}

在这个示例中，我们创建了一个宽度为500px、高度为100px的div元素，并设置了2px的黑色边框。然后，在div元素上使用了伪元素::before和::after，并设置它们的宽度为0，背景色为半透明白色。

接着，使用@keyframes关键字分别定义了两个动画marquee-left和marquee-right，让伪元素从左侧或右侧移动到另一侧，并将宽度逐渐增加到与元素相同的宽度。最后，将动画应用到伪元素上，并设置了动画的持续时间、延迟时间和循环次数。

这样，一个简单的边框跑马灯特效就完成了。