css 边框跑马灯动画

可以使用CSS动画和@keyframes实现边框跑马灯动画。以下是一个简单的示例：

HTML代码：

<div class="border-marquee">Hello World!</div>

CSS代码：

.border-marquee {
  border: 2px solid black;
  padding: 10px;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    border-color: black;
  }
  25% {
    border-color: red;
  }
  50% {
    border-color: yellow;
  }
  75% {
    border-color: blue;
  }
  100% {
    border-color: black;
  }
}

解释：

- 设置一个带有边框和内部填充的DIV元素，使用`animation`属性指定动画。
- 创建名为`marquee`的`@keyframes`动画，通过在不同的百分比位置更改边框颜色来实现跑马灯效果。
- 将`animation`属性设置为`marquee`，持续时间为5秒，线性运动，并且无限循环。

相关问题

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边框跑马灯效果。你可以根据需要调整动画时长、边框样式等属性来实现更满意的效果。

纯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，让伪元素从左侧或右侧移动到另一侧，并将宽度逐渐增加到与元素相同的宽度。最后，将动画应用到伪元素上，并设置了动画的持续时间、延迟时间和循环次数。

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