css实现边框跑马灯效果（彩虹，渐变，叠加）

要使用CSS实现边框跑马灯效果，可以通过关键帧（keyframes）动画和border属性来实现。以下是一个简单的示例，展示如何创建一个边框跑马灯效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框跑马灯效果</title>
<style>
  @keyframes marquee {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
 
  .marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 10px;
    border: 5px solid transparent;
    animation: marquee 10s linear infinite;
  }
 
  .marquee--primary {
    border-image: linear-gradient(to right, #30cfd0 0%, #330867 100%) 1;
    border-image-slice: 10;
  }
 
  .marquee--secondary {
    border-image: linear-gradient(to right, #ff6e7f 0%, #5085ff 100%) 1;
    border-image-slice: 10;
    animation-delay: 2s;
  }
 
  .marquee--overlay {
    position: relative;
  }
 
  .marquee--overlay::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 5px solid #ffeb3b;
    animation: marquee 10s linear infinite;
    animation-delay: 4s;
  }
</style>
</head>
<body>
 
<div class="marquee marquee--primary">跑马灯效果 - 彩虹边框</div>
<div class="marquee marquee--secondary">跑马灯效果 - 渐变边框</div>
<div class="marquee marquee--overlay">跑马灯效果 - 叠加边框</div>
 
</body>
</html>

这段代码中定义了三种不同的边框跑马灯效果：

.marquee--primary 使用了一个由 #30cfd0 到 #330867 的线性渐变来创建彩虹边框，并通过动画使其从左至右无缝滚动。
.marquee--secondary 使用了一个由 #ff6e7f 到 #5085ff 的线性渐变来创建渐变边框，并有延迟动画开始，以模拟层次感。
.marquee--overlay 使用伪元素 ::before 来创建一个叠加边框效果，同样具有动画效果，并有延迟开始。

通过调节 @keyframes marquee 中的 from 和 to 属性，可以控制边框的滚动速度和方向。通过调整 border-image-slice 和 animation-duration，可以控制边框的宽度和滚动时间。

css实现边框跑马灯效果（彩虹，渐变，叠加）

评论已关闭

推荐阅读