CSS-流光特效

前言

在 UI 设计中，合理的动效能极大地提升产品的科技感与交互体验。本文将分享两种高频使用的流光特效：旋转边框流光 （常用于 VIP 会员卡片）与线性扫描流光（常用于加载状态或按钮高亮）。

一、 旋转边框流光 (Border Rotating Glow)

1. 实现效果：

2. 实现原理：背景旋转裁剪

很多同学第一反应是会尝试直接给 `border` 设置渐变，但 CSS 原生 `border` 并不支持动画旋转。

核心黑科技：

1. 底层放一个巨大的、旋转的渐变色块（通常用伪元素实现）。
2. 上层盖一个略小的容器（按钮主体）。
3. 父容器设置 overflow: hidden。 这样，转动的渐变色块被裁剪后，露出的那一圈边缘看起来就像流光在游走。

3. 实现代码

<!-- 外层容器包裹按钮 -->
<div class="glow-wrapper">
  <button class="glow-button">流光按钮</button>
</div>


/* 外层容器：负责流光效果 */
.glow-wrapper {
  position: relative; 
  display: inline-block;
  padding: 4px; /* 控制流光边框的宽度 */
  border-radius: 12px;
  overflow: hidden; /* 关键：裁剪旋转的渐变层 */
}

/* 伪元素：旋转的渐变框 */
.glow-wrapper::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    #0066ff,
    #00ccff,
    #ccff00,
    #ff9900,
    #ff00cc
  );
  border-radius: 12px;
  z-index: -1;
  animation: rotateGlow 3s linear infinite;
}

/* 内部真实按钮 */
.glow-button {
  height: 42px;
  width: 122px;
  line-height: 42px;
  font-size: 18px;
  color: white;
  background: #121212;
  border-radius: 8px; /* 略小于 wrapper 的圆角 */
}
@keyframes rotateGlow {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(180deg);
  }
  60% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

---

二、 线性扫描流光 (Linear Scanning Glow)

1. 实现效果：

2. 实现原理：背景位移

这种效果模拟了光束扫过物体的视觉感，常用于骨架屏或高级按钮。

核心思路：

• 渐变设计 ：设计一个"暗-亮-暗"的 linear-gradient。
• 尺寸放大 ：将 background-size 设为 200% 或更大，让"亮点"隐藏在视口之外。
• 位置动画 ：通过改变 background-position，让亮色条从左至右水平穿过。

3. 实现代码

<div class="glow-wrapper">扫描流光</div>

.glow-wrapper {
  position: relative;
  padding: 20px 40px; /* 边框厚度 */
  color: white;
  border-radius: 10px;
  font-weight: 800;
  background: linear-gradient(90deg, transparent, #00dbde, transparent);
  background-size: 200% 100%;
  animation: scan 2s linear infinite;
}

@keyframes scan {
  0% {
    background-position: -200% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}