CSS 边框动画：利用 `conic-gradient` 作为 `border-image` 实现旋转流光

CSS 边框动画：利用 conic-gradient 作为 border-image 实现旋转流光

大家好，今天我们要深入探讨一个非常有趣且实用的 CSS 技巧：利用 conic-gradient 创建动态的旋转流光边框效果。这种效果不仅能为你的网站增添视觉吸引力，而且实现方式也相当优雅，无需 JavaScript 介入。

1. 核心概念：conic-gradient 和 border-image

在开始之前，我们需要先了解两个核心 CSS 属性：conic-gradient 和 border-image。

• conic-gradient（锥形渐变）： conic-gradient() 函数创建一个从圆心发散的渐变效果，类似于一个锥体从顶部俯视。 我们可以指定多个颜色和它们的位置，形成各种各样的环形图案。

  background-image: conic-gradient(red, yellow, green); /* 默认从顶部开始，顺时针渐变 */
  background-image: conic-gradient(from 90deg, red, yellow, green); /* 从 90 度开始 */
  background-image: conic-gradient(red 0%, yellow 50%, green 100%); /* 精确控制颜色位置 */

• border-image（边框图像）： border-image 允许你使用图像来创建元素的边框。 你可以指定图像的来源、切割方式、以及如何填充边框区域。

  border-image-source: url("border.png"); /* 图像来源 */
  border-image-slice: 30; /* 从图像的四个边切割 30 像素 */
  border-image-width: 30px; /* 边框宽度 */
  border-image-outset: 0; /* 边框向外偏移 */
  border-image-repeat: stretch; /* 图像重复方式 */

  或者使用简写形式：

  border-image: url("border.png") 30 stretch;

2. 实现旋转流光边框的思路

我们的目标是创建一个动态的、旋转的、类似霓虹灯效果的边框。 为了实现这个目标，我们将 conic-gradient 生成的环形渐变作为 border-image-source，然后通过 CSS 动画旋转这个渐变，从而产生流光效果。

3. 详细步骤及代码示例

3.1 HTML 结构

首先，我们需要一个 HTML 元素来应用边框效果。 这里我们使用一个简单的 <div>：

<div class="glowing-border">
  This is a glowing border element.
</div>

3.2 CSS 样式

接下来，我们为这个 <div> 元素添加 CSS 样式。

.glowing-border {
  width: 300px;
  height: 200px;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: white;
  background-color: #222;
  border: 10px solid transparent; /* 关键：设置边框宽度，但颜色透明 */
  border-image: conic-gradient(from 0deg,
      #00ffff,
      #00ffff 12.5%,
      #0000ff 12.5%,
      #0000ff 25%,
      #ff00ff 25%,
      #ff00ff 37.5%,
      #ffff00 37.5%,
      #ffff00 50%,
      #00ffff 50%,
      #00ffff 62.5%,
      #0000ff 62.5%,
      #0000ff 75%,
      #ff00ff 75%,
      #ff00ff 87.5%,
      #ffff00 87.5%,
      #ffff00 100%) 1; /* 使用 conic-gradient 作为 border-image-source，slice 设置为 1 */
  animation: rotate 5s linear infinite; /* 应用动画 */
  box-sizing: border-box; /* 确保 padding 和 border 包含在 width 和 height 中 */
}

@keyframes rotate {
  to {
    border-image-source: conic-gradient(from 360deg,
        #00ffff,
        #00ffff 12.5%,
        #0000ff 12.5%,
        #0000ff 25%,
        #ff00ff 25%,
        #ff00ff 37.5%,
        #ffff00 37.5%,
        #ffff00 50%,
        #00ffff 50%,
        #00ffff 62.5%,
        #0000ff 62.5%,
        #0000ff 75%,
        #ff00ff 75%,
        #ff00ff 87.5%,
        #ffff00 87.5%,
        #ffff00 100%);
  }
}

代码解释：

• .glowing-border：定义元素的尺寸、内边距、字体、背景颜色等基本样式。
• border: 10px solid transparent;：设置边框宽度为 10px，但颜色设置为透明，以便 border-image 可以覆盖它。 这一步非常重要，如果没有透明边框，border-image 将无法显示。
• border-image: conic-gradient(...) 1;：将 conic-gradient 生成的渐变图像设置为 border-image-source。 border-image-slice: 1 意味着我们从图像的四个边都切割 1 像素，实际上相当于没有切割。 这是因为我们的 conic-gradient 已经是完整的图像，不需要切割。border-image-width 默认等于 border-width，所以无需额外设置。
• animation: rotate 5s linear infinite;：应用名为 rotate 的动画，持续时间 5 秒，线性速度，无限循环。
• @keyframes rotate：定义动画的关键帧。 在这里，我们简单地将 conic-gradient 的起始角度从 0deg 旋转到 360deg。 这会创建一个旋转的流光效果。
• box-sizing: border-box;：确保元素的总宽度和总高度包括边框和内边距。

3.3 深入理解 conic-gradient 的颜色分布

conic-gradient 的颜色分布是实现流光效果的关键。 在上面的代码中，我们使用了以下颜色分布：

#00ffff 0%,
#00ffff 12.5%,
#0000ff 12.5%,
#0000ff 25%,
#ff00ff 25%,
#ff00ff 37.5%,
#ffff00 37.5%,
#ffff00 50%,
#00ffff 50%,
#00ffff 62.5%,
#0000ff 62.5%,
#0000ff 75%,
#ff00ff 75%,
#ff00ff 87.5%,
#ffff00 87.5%,
#ffff00 100%

这意味着我们将一个圆分成 8 等份，每份占 12.5%。 每个等份使用两种颜色，并且颜色之间是硬过渡，而不是平滑渐变。 这样可以创建出鲜明的色块，增强流光效果。

3.4 调整颜色和动画速度

你可以根据自己的喜好调整颜色和动画速度。 例如，你可以更改颜色代码，或者增加或减少颜色数量。 你也可以调整 animation-duration 属性来改变动画速度。

.glowing-border {
  border-image: conic-gradient(from 0deg,
      red,
      red 20%,
      blue 20%,
      blue 40%,
      green 40%,
      green 60%,
      yellow 60%,
      yellow 80%,
      purple 80%,
      purple 100%) 1;
  animation: rotate 2s linear infinite; /* 更快的旋转速度 */
}

4. 兼容性问题

conic-gradient 的兼容性相对较好，主流浏览器都支持。 但是，为了确保最佳的兼容性，你可以考虑添加浏览器前缀。

.glowing-border {
  border-image: conic-gradient(from 0deg,
      #00ffff,
      #00ffff 12.5%,
      #0000ff 12.5%,
      #0000ff 25%,
      #ff00ff 25%,
      #ff00ff 37.5%,
      #ffff00 37.5%,
      #ffff00 50%,
      #00ffff 50%,
      #00ffff 62.5%,
      #0000ff 62.5%,
      #0000ff 75%,
      #ff00ff 75%,
      #ff00ff 87.5%,
      #ffff00 87.5%,
      #ffff00 100%) 1;

  /*  添加浏览器前缀，虽然现在可能不再需要，但为了兼容旧版本浏览器 */
  border-image: -webkit-conic-gradient(from 0deg,
      #00ffff,
      #00ffff 12.5%,
      #0000ff 12.5%,
      #0000ff 25%,
      #ff00ff 25%,
      #ff00ff 37.5%,
      #ffff00 37.5%,
      #ffff00 50%,
      #00ffff 50%,
      #00ffff 62.5%,
      #0000ff 62.5%,
      #0000ff 75%,
      #ff00ff 75%,
      #ff00ff 87.5%,
      #ffff00 87.5%,
      #ffff00 100%) 1;

  border-image: -moz-conic-gradient(from 0deg,
      #00ffff,
      #00ffff 12.5%,
      #0000ff 12.5%,
      #0000ff 25%,
      #ff00ff 25%,
      #ff00ff 37.5%,
      #ffff00 37.5%,
      #ffff00 50%,
      #00ffff 50%,
      #00ffff 62.5%,
      #0000ff 62.5%,
      #0000ff 75%,
      #ff00ff 75%,
      #ff00ff 87.5%,
      #ffff00 87.5%,
      #ffff00 100%) 1;
  animation: rotate 5s linear infinite;
}

5. 高级技巧

5.1 创建更复杂的流光效果

你可以通过调整 conic-gradient 的颜色分布和动画方式，创建更复杂的流光效果。 例如，你可以使用更多的颜色，或者使用非线性动画。

.glowing-border {
  border-image: conic-gradient(from 0deg,
      #f00 0%,
      #f00 10%,
      #ff0 10%,
      #ff0 20%,
      #0f0 20%,
      #0f0 30%,
      #0ff 30%,
      #0ff 40%,
      #00f 40%,
      #00f 50%,
      #f0f 50%,
      #f0f 60%,
      #f00 60%,
      #f00 70%,
      #ff0 70%,
      #ff0 80%,
      #0f0 80%,
      #0f0 90%,
      #0ff 90%,
      #0ff 100%) 1;
  animation: rotate 3s ease-in-out infinite; /* 使用 ease-in-out 动画 */
}

5.2 使用 CSS 变量

为了更方便地管理颜色和动画参数，你可以使用 CSS 变量。

:root {
  --border-color-1: #00ffff;
  --border-color-2: #0000ff;
  --border-color-3: #ff00ff;
  --border-color-4: #ffff00;
  --animation-duration: 5s;
}

.glowing-border {
  border-image: conic-gradient(from 0deg,
      var(--border-color-1),
      var(--border-color-1) 12.5%,
      var(--border-color-2) 12.5%,
      var(--border-color-2) 25%,
      var(--border-color-3) 25%,
      var(--border-color-3) 37.5%,
      var(--border-color-4) 37.5%,
      var(--border-color-4) 50%,
      var(--border-color-1) 50%,
      var(--border-color-1) 62.5%,
      var(--border-color-2) 62.5%,
      var(--border-color-2) 75%,
      var(--border-color-3) 75%,
      var(--border-color-3) 87.5%,
      var(--border-color-4) 87.5%,
      var(--border-color-4) 100%) 1;
  animation: rotate var(--animation-duration) linear infinite;
}

5.3 添加内阴影

为了增强发光效果，你可以添加内阴影。

.glowing-border {
  box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.5); /* 添加内阴影 */
}

6. 代码优化和可维护性

虽然上述代码可以实现旋转流光边框效果，但我们可以进一步优化代码，提高可维护性。

6.1 使用 Sass/Less 预处理器

使用 Sass 或 Less 等 CSS 预处理器可以极大地提高代码的可维护性和可读性。 例如，我们可以使用循环来生成 conic-gradient 的颜色分布。

$colors: (#00ffff, #0000ff, #ff00ff, #ffff00);
$num-colors: length($colors);
$segment-size: 100% / ($num-colors * 2); // 每个颜色段的大小

@function generate-conic-gradient($colors, $segment-size) {
  $gradient: ();

  @for $i from 1 through length($colors) {
    $color: nth($colors, $i);
    $start: ($i - 1) * $segment-size * 2;
    $end: $i * $segment-size * 2;

    $gradient: append($gradient, $color $start, comma);
    $gradient: append($gradient, $color $start + $segment-size, comma);
  }

  @return conic-gradient(from 0deg, $gradient...);
}

.glowing-border {
  border-image: generate-conic-gradient($colors, $segment-size) 1;
  animation: rotate 5s linear infinite;
}

6.2 将动画抽象为 mixin

我们可以将动画效果抽象为一个 mixin，以便在不同的元素上重复使用。

@mixin glowing-border($colors, $duration: 5s) {
  $num-colors: length($colors);
  $segment-size: 100% / ($num-colors * 2);

  @function generate-conic-gradient($colors, $segment-size) {
    $gradient: ();

    @for $i from 1 through length($colors) {
      $color: nth($colors, $i);
      $start: ($i - 1) * $segment-size * 2;
      $end: $i * $segment-size * 2;

      $gradient: append($gradient, $color $start, comma);
      $gradient: append($gradient, $color $start + $segment-size, comma);
    }

    @return conic-gradient(from 0deg, $gradient...);
  }

  border-image: generate-conic-gradient($colors, $segment-size) 1;
  animation: rotate $duration linear infinite;
}

.glowing-border {
  @include glowing-border((#00ffff, #0000ff, #ff00ff, #ffff00));
}

.another-element {
  @include glowing-border((red, green, blue), 3s); // 可以使用不同的颜色和动画时长
}

7. 替代方案

虽然使用 conic-gradient 和 border-image 可以实现旋转流光边框效果，但也有一些替代方案。

• 使用 JavaScript： 你可以使用 JavaScript 来动态地创建和更新边框效果。 这种方法更加灵活，但也更加复杂。
• 使用 SVG： 你可以使用 SVG 来创建矢量图形的边框，并使用 CSS 动画来旋转这个边框。 SVG 的优点是可伸缩性强，但学习曲线较陡峭。
• 使用多个 box-shadow：可以通过设置多个不同颜色和偏移量的 box-shadow 来模拟发光效果，然后再配合动画实现旋转。但这种方法性能开销较大，不推荐在高负载场景下使用。

各种方案的比较

方案	优点	缺点	适用场景
conic-gradient + border-image	简单易用，性能较好，无需 JavaScript，代码可读性高。	兼容性需要考虑，对于复杂的流光效果，颜色配置较为繁琐。	简单到中等复杂度的流光边框效果，对性能要求较高，且不希望引入 JavaScript 的场景。
JavaScript	灵活性高，可以实现各种复杂的动画效果，可以根据用户交互动态改变效果。	增加了前端的复杂性，需要编写 JavaScript 代码，性能可能不如纯 CSS 方案，SEO 可能受到影响。	需要高度定制化的动画效果，或者需要根据用户交互动态改变效果的场景。
SVG	可伸缩性强，矢量图形，可以创建复杂的图形边框，动画效果流畅。	学习曲线较陡峭，需要掌握 SVG 语法，代码可读性可能不如 CSS 方案。	需要创建复杂的图形边框，或者需要高度可伸缩性的场景。
多个 box-shadow	实现简单，可以快速创建发光效果。	性能开销大，尤其是在移动设备上，可能导致页面卡顿，效果不如 conic-gradient 方案自然。	快速实现简单的发光效果，对性能要求不高的场景。

8. 总结

今天我们学习了如何使用 conic-gradient 和 border-image 创建动态的旋转流光边框效果。 这种方法简单易用，性能较好，并且无需 JavaScript。 通过调整颜色分布和动画方式，你可以创建各种各样的流光效果。 记住，代码优化和可维护性同样重要。 希望这篇讲座能帮助你掌握这个有趣的 CSS 技巧，并应用到你的项目中。

利用 CSS 也能实现酷炫的视觉效果

我们可以只用 CSS 来实现动态流光边框，这种方法简单且高效，而且兼容性也能得到保证。通过理解 conic-gradient 和 border-image 的原理，我们可以灵活地定制各种各样的流光效果。

更多IT精英技术系列讲座，到智猿学院